路线不会在子级的第二级呈现组件

Question

在App.js

    <Switch>
      <Route path="/signin" component={SignIn} />
      <Route path="/signout" component={SignOut} />
      <Route path="/" component={Dashboard} />
      <Redirect to="/" />
    </Switch>

在Dashboard.js

      <Switch>
        <Route path='/students' component={ManageStudents} />
        <Route path='/lecturers' component={ManageLecturers} />
        <Route path='/surveys' component={ManageSurveys} />
      </Switch>

在ManageStudents.js

    <Switch>
      <Route path='/students/upload' component={UploadFileArea}/>
    </Switch>

我可以在 Dashboard 中访问 /signout 但在 ManageStudents 中，当我单击注销时 url 是 http://localhost:3000/students/signout 但我没有呈现 Signout 组件。添加 <Route path="/students/signout" component={SignOut} /> 即可渲染。任何人都可以解释为什么会发生这种情况并在不添加额外路线的情况下解决方案吗？

Answer 1

如果您被重定向到 http://localhost:3000/students/signout，实际上在 URL 模式下没有解析到 SignOut 组件的路由（这就是它失败的原因）：

<Switch>
  <Route path="/signin" component={SignIn} />
  <Route path="/signout" component={SignOut} />
  <Route path="/" component={Dashboard} />
  <Redirect to="/" />
</Switch>

但是，您不需要添加路由来涵盖该场景（您的路由看起来不错）。我很可能需要更新您构建指向 "signout".

的 link 的方式

路线不会在子级的第二级呈现组件

Route does not render component on 2nd level of children

reactjs

react-router

react-router-v4