Question

我正面临着尝试定义无路径布局路径的问题（在路由器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，它将呈现两个组件。我想要实现的是一个浅层网址，所以我不想为布局定义路由。这在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 v4 - Authorized routes and components

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

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

2 个答案: