Question

我有一个关于我的身份验证页面的概念性问题。

目前我有这个：

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

现在我想将所有'Auth页面'包装在父容器'Auth'中，所以我这样做：

<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 /登录

但我需要登录页面

/登录

这样做的最佳实践是什么？

提前感谢您的帮助。

Answer 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>

Answer 2

最终找到了一个工作正常的解决方案

{{1}}

React + React-router - ＆gt;孩子路线最好的组织？

2 个答案: