Question

我正在从事React项目，但遇到了一个问题。基本上，我的应用程序在大多数路径上使用仪表板视图，但这些路径除外： -/（根目录）显示HomePage组件 -/ signin显示登录组件 -/ signup，显示SignUp组件 -/ pwdrecovery显示密码恢复组件

我想使用正则表达式来定向这些路由，但到目前为止，我只能使其与根目录一起使用。

这是我当前的代码：

 render() {
return (
  <div>
    <ScrollToTop>
      <Switch>
        <Route path="/" component={HomePage} exact />
        <Route path="/signin" component={SignIn} />
        <Route path="/signup" component={SignUp} />
      </Switch>
      <Route
        path="/(.+)"
        render={() => (
          <React.Fragment>
            <ResponsiveMenu />
            <Header />
            <SidePanel profile={profile} />
            <HamburgerMenu />
            <div className="container-dashboard">
              <Switch>
                <Route exact path="/dashboard" component={Dashboard} />
                <Route path="/log" component={LogDashboard} />
              </Switch>
            </div>
          </React.Fragment>
        )}
      />
    </ScrollToTop>
  </div>
);

我的问题是：我可以用正则表达式实现吗？如果是这样，我需要使用什么正则表达式（使用RegEx很烂）？

如果没有，我该如何进行这项工作？我是否应该创建一个将另一个组件作为道具的组件（WithDashboard），并将其与标题和侧面板一起呈现在仪表板div中？还是应该使用withRouter（）高阶组件并使用props.location.pathname吗？

如何将RegEx与React Router一起使用？

0 个答案: