我想使用 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>
当我转到 / profile 路径时,会显示 SidebarProfileComponent ,但不会显示ChangePasswordComponent。
答案 0 :(得分:0)
由于在父路由上定义了exact attribute
,因此当您访问/profile/change-password
时,父路由本身不匹配,因此子路由不存在匹配问题。
如果您从父路线中删除了确切的道具,/profile
会与/profile/change-password
匹配,因此ProfileComponent
会被渲染,然后子路线会被匹配
从父级移除确切的道具
<Router history={history}>
<div>
<Route path="/profile" component={ProfilePageComponent}/>
</div>
</Router>
P.S。永远记住,如果您有嵌套的路线,则一定不要使用精确 属性,而对多条路线使用
Switch
组件