Question

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

<Switch>

它不适用于/auth，因为它首先匹配login page并呈现关联的组件。因此，当我点击链接转到Auth Component时，它会呈现Login Component而不是Auth Component + Login Component。

如何使用react-router实现该行为？我尝试了嵌套路由，但如果我采用与以前相同的示例，它将呈现URL:"/newmessage.php" //modification needs here。

感谢。

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>

我希望这会有所帮助。

React-Router嵌套路由名称

1 个答案: