react-router-v4 - 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并渲染关联的组件。因此，当我单击链接转到login page例如它呈现的Auth Component而不是Login Component.

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

谢谢。

Answer 1

您可以将确切的道具添加到您的/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>

我希望这有帮助。