[英]React-router-dom, route component not render
i want to create a tab using react-router-dom .我想使用react-router-dom创建一个选项卡。 so in my parent route, i set my route to the profile page.
所以在我的父路线中,我将路线设置为个人资料页面。
<Router history={history}>
<div>
<Route path="/profile" exact component={ProfilePageComponent}/>
</div>
</Router>
then, in my ProfilePageComponent , i set the child route然后,在我的ProfilePageComponent中,我设置了子路由
<div className="profile-page-container">
<div className="height-controler">
<SidebarProfileComponent/>
<Switch>
<Route path={`/profile/change-password`} component={ChangePasswordComponent}/>
</Switch>
</div>
</div>
when i go to the /profile path, the SidebarProfileComponent is showing but the ChangePasswordComponent isnt showing.当我将 go 移至/profile路径时,显示SidebarProfileComponent 但未显示 ChangePasswordComponent。
Since you have an exact attribute
defined on the parent route, when you visit /profile/change-password
, the parent Route itself doesn't match and hence there is no question of the child route matching.由于您在父路由上定义了
exact attribute
,因此当您访问/profile/change-password
时,父路由本身不匹配,因此不存在子路由匹配的问题。
If you remove the exact prop from the parent route, /profile
matches /profile/change-password
and hence ProfileComponent
gets rendered and then the child Route is matched如果您从父路由中删除确切的道具,
/profile
匹配/profile/change-password
,因此ProfileComponent
被渲染,然后子路由匹配
Remove the exact prop from parent从父级删除确切的道具
<Router history={history}>
<div>
<Route path="/profile" component={ProfilePageComponent}/>
</div>
</Router>
PS Always remember if you have nested Routes, you must not use exact attribute, instead use
Switch
component for multiple RoutesPS 永远记住,如果你有嵌套的路由,你一定不能使用精确的属性,而是对多个路由使用
Switch
组件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.