javascript - 我应该使用多个 Router 组件来创建多级导航吗？

Question

假设我有以下应用程序结构:

+--+--+ login
   |
   +--+ signup
   |
   +--+ inner main
      |
      +--+ settings/user
      |
      +--+ settings/app
      |
      +--+ settings/about
      |...

inner 将包裹其下方的所有内容，但是当我到达 /settings 时，我将有 3 个将使用路由器的选项卡。我希望 settings 为它下面的所有路由提供另一个包装器，因此如果我登录并转到 www.myapp.com/settings/user 我会得到innerWrapper -> settingsWrapper -> userSettings

设置是否应该使用自己的路由组件，因为我不确定是否有一种方法可以将其组件包含在一个路由器组件设置中。做这样的事情似乎很糟糕:

<Route path="/settings/user" {...rest} render={props => (
    <wrapper>
      <User {...props}/>
    </wrapper>
)}/>
<Route path="/settings/app" {...rest} render={props => (
    <wrapper>
      <App {...props}/>
    </wrapper>
)}/>

Answer 1

在 React Router V4 中，您将子路由放入组件内。

因此，在路由器所在的 InnerWrapper 组件中，您可以有一条通往 '/settings' 页面的路由，该页面呈现 SettingsWrapper强>组件:

<BrowserRouter>
  <Route path='/settings' component={ SettingsWrapper } />
  // Other routes
</BrowserRouter>

然后在您的 SettingsWrapper 组件中，您可以使用子路由来渲染其中的其他组件:

<Route path='/settings/user' component={ UserSettings } />
<Route path='/settings/app' component={ AppSettings } />

我希望这会有所帮助。