Question

我使用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>

问题：

当我访问/login时，Admin组件也匹配。
我尝试过更改为<Match pattern="/" exactly component={Admin} />。它不会在Admin组件中呈现子匹配。因此，当我访问/profile时，它无法匹配。

Answer 1

我一直在使用Switch模块进行嵌套路由，到目前为止我一直在为我做好准备：

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

您还可以使用组件内部的开关来执行子导航等操作。

Answer 2

使用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 }
]} />

无法将路由从react-router v3转换为v4

2 个答案: