1

我使用 react-router v3 进行了以下路由配置：

<Route component={App}>
  <Route path="login" component={Login} />
  <Route path="logout" component={Logout} />
  <Route path="/" component={Admin}>
    <IndexRoute component={Dashboard} />
    <Route path="profile" component={Profile} />
  </Route>
</Route>

我使用 v4 尝试了以下操作：

<Router>
  <div id="app">
    <Match pattern="/login" component={Login} />
    <Match pattern="/logout" component={Logout} />
    <Match pattern="/" component={Admin} />
  </div>
</Router>

和内部Admin组件：

<div id="admin">
  <Match pattern="/" component={Dashboard} />
  <Match pattern="/profile" component={Profile} />
</div>

问题：

  1. 当我访问时/login，Admin组件也匹配。
  2. 我尝试更改为<Match pattern="/" exactly component={Admin} />. 它不会呈现Admin组件中的子匹配项。所以当我访问时/profile，它没有匹配。
4

2 回答 2

3

我一直在使用 Switch 模块进行嵌套路由，到目前为止对我来说效果还不错：

<Router>
  <App>
    <Switch>
      <Route exactly pattern="/" component={Home} />
      <Route pattern="/about" component={About} />
      <Route pattern="/etc" component={Etc} />
    </Switch>
  </App>
</Router>

您还可以在组件内部使用 Switch 进行子导航等操作。

于 2017-03-19T23:54:22.453 回答
1

嵌套在 v4 中仍然有点不稳定，但它仍处于 alpha 阶段，因此不应该太出人意料。

当您定义了代码时，没有一种好方法可以做您想做的事。一种可能的解决方案是拥有一个withAdmin更高阶的组件，该组件将为包装组件呈现您的管理 HTML。

const withAdmin = (Component) => {
  return (matchProps) => (
    <div id="admin">
      <Component {...matchProps} />
    </div>
  )
}

您会使用如下：

<Router>
  <div id="app">
    <Match pattern="/login" component={Login} />
    <Match pattern="/logout" component={Logout} />
    <Match exactly pattern="/" component={withAdmin(Dashboard)} />
    <Match pattern="/profile" component={withAdmin(Profile)} />
  </div>
</Router>

这并不理想，但它应该可以工作。

最终版本也有可能包含一个<Match___>接受模式数组的组件，并且只呈现与第一个匹配模式关联的组件。这将是您问题的真正解决方案，但它还不存在。

<Match___ routes={[
  { pattern: '/login', component: Login },
  { pattern: '/logout', component: Logout },
  { pattern: '/', component: Admin }
]} />
于 2016-12-29T19:24:41.003 回答