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>

当我单击退出时，我可以在仪表板中访问/ signout，但在ManageStudents中，URL为http://localhost:3000/students/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>

但是，您无需添加路由即可涵盖该情况（您的路由看起来不错）。我很可能需要更新您构建指向“注销”链接的方式。

Route不会在第二级子级上渲染组件

1 个答案: