React-router-dom,路由组件未呈现

时间:2020-05-15 08:00:00

标签: reactjs react-router-dom

我想使用 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。

1 个答案:

答案 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组件