React + React-router -> 子路由最好的组织？答案

【问题标题】：React + React-router -> Child routes best organization?React + React-router -> 子路由最好的组织？
【发布时间】：2016-12-04 23:20:43
【问题描述】：

我的身份验证页面存在概念问题。

目前我有这个：

<Route path="/" component={App}>
  <Route path="login" component={Login} />
  <Route path="register" component={Register}/>
  <Route path="*" component={NoMatch}/>
</Route>

现在我想将我所有的“身份验证页面”包装在一个父容器“身份验证”中，所以我这样做：

<Route path="/" component={App}>
  <Route path="/auth" component={Auth}>
    <Route path="login" component={Login} />
    <Route path="register" component={Register}/>
  </Route>
  <Route path="*" component={NoMatch}/>
</Route>

问题：现在如果我想访问我的登录页面，我会去

/auth/登录

但我需要我的登录页面保持打开

/登录

这样做的最佳做法是什么？

提前感谢您的帮助。

【问题讨论】：

标签： javascript reactjs routes react-router

【解决方案1】：

虽然它更多是为了向后可比性，但您可以只使用 react-router 的 Redirect 组件：

<Route path="/" component={App}>
  <Route path="/auth" component={Auth}>
    <Route path="login" component={Login} />
    <Route path="register" component={Register}/>
  </Route>

  <Redirect from="/login" to="/auth/login" />

  <Route path="*" component={NoMatch}/>
</Route>

【讨论】：

使用重定向组件，最终路由是 /auth/login 但我需要 /login
为什么最终路线很重要？
最终路由应该是 /login :)
确实是一项崇高的事业:)

【解决方案2】：

终于找到了一个可以正常工作的解决方案

<Route path="/" component={App}>
  <Route path="/" component={Auth}>
    <Route path="login" component={Login} />
    <Route path="register" component={Register}/>
  </Route>
  <Route path="about" component={About} />

  <Route path="*" component={NoMatch}/>
</Route>

【讨论】：

您也可以省略第二个 Route 元素中的 path="/"。