Question

我们说我有以下应用结构：

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

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

settings是否应该使用自己的Route组件，因为我不确定是否有办法将其组件保存在一个路由器组件设置中。做这样的事情似乎很糟糕：

<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 组件中，您可以找到＆＃39; / settings＆＃39; 页面的路径，该页面呈现< strong> SettingsWrapper 组件：

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

然后在您的 SettingsWrapper 组件中，您可以拥有将在其中呈现其他组件的子路线：

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

我希望这会有所帮助。

我应该使用多个路由器组件来创建多级导航吗？

1 个答案: