React-Router 嵌套路由名称

Question

我想在 react-router v4 中实现那种路由。

/auth => auth home page    
/auth/login => login page    
/auth/register => register page     
/auth/forgot => lost password page      
/auth/reset => change password page

它不适用于 <Switch>，因为它首先匹配 /auth 并呈现关联的组件。因此，当我单击 link 转到 login page 时，它呈现 Auth Component 而不是 Login Component.

如何使用 react-router 实现该行为？我尝试了嵌套路由，但如果我采用与以前相同的示例，它将呈现 Auth Component + Login Component.

谢谢。

Answer 1

您可以将 exact 属性添加到您的 /auth 路由：

<Switch>
  <Route exact path='/auth' component={Auth} />
  <Route path='/auth/login' component={Login} />
  <Route path='/auth/register' component={Register} />
  <Route path='/auth/forgot' component={ForgotPassword} />
  <Route path='/auth/reset' component={ChangePassword} />
</Switch>

或者，您可以将 /auth 路由移动到列表的末尾，以便其他路由首先匹配：

<Switch>
  <Route path='/auth/login' component={Login} />
  <Route path='/auth/register' component={Register} />
  <Route path='/auth/forgot' component={ForgotPassword} />
  <Route path='/auth/reset' component={ChangePassword} />
  <Route path='/auth' component={Auth} />
</Switch>

希望对您有所帮助。

React-Router 嵌套路由名称

React-Router nested routes names

nested-routes

preact

react-router-v4