React Router 4 - 定义没有路径的布局路由

Question

我在尝试定义无路径布局路由时遇到问题（这在 React 路由器 3 中是可能的）。基本上我想要实现的是：在我的 index.js:

 <Router history={history}>
        <Route path="/" component={App}/>
    </Router>

在我的 App 组件中定义布局

<Switch>
    <Route path="" component={AuthLayout}/>
    <Route path="" component={MainLayout}/>
</Switch>

现在因为它们只是布局，我希望它们执行一些功能并定义它们的嵌套路由，例如

在 AuthLayout 中：

<Switch>
     <Route exact path={`${match.path}/sign-up`} component={SignUpContainer}/>
     <Route exact path={`${match.path}/login`} component={LoginContainer}/>
                                <Route component={SignUpContainer}/>
</Switch>

并在 MainLayout 中：

    <Switch>
      <Route exact path={`${match.path}/explorer`} component={ExplorerContainer}/>
//more routes 
      <Route component={NotFoundContainer}/>
    </Switch>

现在我知道它不会工作，因为 switch 总是会命中第一个项目，没有 Switch 它将渲染两个组件。我想要实现的是浅层 url 所以我不想为布局定义路线。在 RRTR 3 中是可能的，但我不知道我是否可以在 RRTR 4 中做到这一点

仅供参考3我是这样做的：

<Route path="/" component={App}>
            <IndexRedirect to="login"/>
            /*Profile Management Flows*/
            <Route path="" component={AuthLayout}>
                <Route path="login" component={LoginContainer}/>
                <Route path="sign-up" component={SignUpContainer}/>
                <Route path="forgot-password" component={ForgotPasswordContainer}/>
                <Route path="reset-password" component={ResetPasswordContainer}/>
                <Route path="on-boarding" component={OnBoardingContainer}/>


            </Route>

有什么建议吗？我应该放弃并为每个布局添加路径吗？我应该坚持使用 RRTR3 吗？

Answer 1

是的，您将无法完全按照您使用 React Router 3 的方式进行操作。我认为类似的事情可以通过以下方式完成：

<Switch>
  <Route path="/(login|signup|forgot-password|reset-password)" render={({ location }) => (
    <AuthLayout>
        <Switch>
          <Route path="/login" component={/* ... */} />
          <Route path="/signup" component={/* ... */} />
          {/* ... */}
        </Switch>
    </AuthLayout>
  )} />
  <Route path="/" component={MainLayout} />
</Switch>

Answer 2

我建议将所有路由放在一个开关中，并指定要在每个容器内使用的布局。维护起来会更方便。

<Switch>
     <Route path="/sign-up" component={SignUpContainer}/>
     <Route path="/login" component={LoginContainer}/>
     <Route path="/explorer" component={ExplorerContainer}/>
     <Route path="/" component={MainLayout} />
</Switch>

如果您想保护路由不受未经授权的用户访问，您可以使用高阶组件。我在这里解释了如何实现：

我发现以下关于 React Router 4 的文章非常有帮助：https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

React Router 4 - 定义没有路径的布局路由

React Router 4 - Defining Layout routes with no paths

reactjs

react-router

react-router-v4