![](/img/trans.png)
[英]How to add a route that will render a component using react-router-dom?
[英]React-router-dom, route component not render
我想使用react-router-dom创建一个选项卡。 所以在我的父路线中,我将路线设置为个人资料页面。
<Router history={history}>
<div>
<Route path="/profile" exact component={ProfilePageComponent}/>
</div>
</Router>
然后,在我的ProfilePageComponent中,我设置了子路由
<div className="profile-page-container">
<div className="height-controler">
<SidebarProfileComponent/>
<Switch>
<Route path={`/profile/change-password`} component={ChangePasswordComponent}/>
</Switch>
</div>
</div>
当我将 go 移至/profile路径时,显示SidebarProfileComponent 但未显示 ChangePasswordComponent。
由于您在父路由上定义了exact attribute
,因此当您访问/profile/change-password
时,父路由本身不匹配,因此不存在子路由匹配的问题。
如果您从父路由中删除确切的道具, /profile
匹配/profile/change-password
,因此ProfileComponent
被渲染,然后子路由匹配
从父级删除确切的道具
<Router history={history}>
<div>
<Route path="/profile" component={ProfilePageComponent}/>
</div>
</Router>
PS 永远记住,如果你有嵌套的路由,你一定不能使用精确的属性,而是对多个路由使用
Switch
组件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.