使用 React Router 渲染了错误的组件
2020-10-24
76
当我尝试导航到以下网址 http://localhost:3000/alunos/adicionar-aluno 时,它会使用空值呈现组件 {Detail Student},而不是正确的组件 {FormAddStudent}。 我是 React 的新手,所以不确定我做错了什么,我尝试使用确切的 prop,但没有成功。
这是代码:
<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>
提前致谢!
1个回答
React Router 从顶部开始寻找第一个匹配的路由。 exact prop 不会阻止 React router 渲染所有匹配的路由,它只确保渲染一个匹配的路由。在你的情况下,你有两个匹配的路由:
- /alunos/:id
- /alunos/adicionar-aluno
它首先捕获 /alunos/:id 并渲染与该路由关联的组件。因此,在这种情况下,路由的 顺序 很重要。正如@HalilC 在评论中提到的,切换路由顺序将解决你的问题。
Zivojin Milutinovic
2020-10-24