javascript – React React-router – > Child路由最好的组织？

2023年2月7日 133次阅读

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

目前我有这个：

<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/login

但我需要登录页面

/login

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

提前感谢您的帮助.

最佳答案 虽然它更倾向于向后兼容性,但您可以使用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>
点赞