Javascript 将路由从react路由器v3转换为v4时出现问题

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

问题是：

当我访问

/login

时，

Admin

组件也匹配

我试着换成

。它不会在

Admin

组件中呈现子匹配项。因此，当我访问

/profile

时，它没有匹配项

---

v4的嵌套仍然有点不稳定，但它仍然在alpha中，所以这不应该太出乎意料

因为您已经定义了代码，所以没有一个好的方法来实现您想要的。一个可能的解决方案是使用

with admin

高阶组件，为包装好的组件呈现管理HTML

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

constwithadmin=（组件）=>{
返回（匹配道具）=>(
)
}

您将使用以下选项：

<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___ routes={[
  { pattern: '/login', component: Login },
  { pattern: '/logout', component: Logout },
  { pattern: '/', component: Admin }
]} />

---

v4的嵌套仍然有点不稳定，但它仍然是alpha的，所以这不应该太意外

因为您已经定义了代码，所以没有一个好的方法来实现您想要的。一个可能的解决方案是使用

with admin

高阶组件，为包装好的组件呈现管理HTML

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

constwithadmin=（组件）=>{
返回（匹配道具）=>(
)
}

您将使用以下选项：

<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___ routes={[
  { pattern: '/login', component: Login },
  { pattern: '/logout', component: Logout },
  { pattern: '/', component: Admin }
]} />

---

我一直在使用交换机模块进行嵌套路由，到目前为止，该模块运行正常：

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

---

您也可以在组件内部使用开关进行子导航等操作。

我一直在使用开关模块进行嵌套路由，到目前为止，我的工作还不错：

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

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