时间戳

首页 > 解决方案 > 使用反应路由器渲染了错误的组件

reactjs - 使用反应路由器渲染了错误的组件

问题描述

当我试图导航到以下 url http://localhost:3000/alunos/adicionar-aluno 但它使用空值而不是正确的组件 { FormAddStudent } 呈现组件 {Detail Student}。我是新手，所以不确定我做错了什么，我正在尝试使用确切的道具但没有成功。

这是代码：

  <Router>
  <CssBaseline />
  <div className="App" className={classes.root}>
    <Header />
    <MenuContainer />
    <Switch>
      <Route path="/" exact />
      <Route path="/alunos" exact component = { ListStudents }/>
      <Route path="/contratos" exact component = { ListContracts }/>
      <Route path="/turmas" exact component = { ListClasses }/>
      <Route path="/estagios" exact component = { ListInterships }/>
      <Route path="/formadores" exact component = { ListInstructors }/>
      <Route path="/analise-seguros" exact component = { ListInsurances }/>
      <Route path="/alunos/:id" component = { DetailStudent }/>
      <Route path="/alunos/adicionar-aluno"  exact component = { FormAddStudent }/>
    </Switch>
  </div>
</Router>

提前致谢！

标签： reactjsreact-router

解决方案

React Router 从顶部开始并寻找第一个匹配的路由。确切的道具不会阻止 React 路由器渲染所有匹配的路由，它只确保渲染一个匹配的路由。在您的情况下，您有两个匹配的路由：

  • /alunos/:id
  • /alunos/adicionar-aluno

它首先捕获 /alunos/:id 并渲染与该路由关联的组件。因此，在这种情况下，路由的顺序很重要。正如@HalilC 在评论中提到的，切换路由的顺序将解决您的问题。

推荐阅读