Question

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

Answer 1

由于在父路由上定义了exact attribute，因此当您访问/profile/change-password时，父路由本身不匹配，因此子路由不存在匹配问题。

如果您从父路线中删除了确切的道具，/profile会与/profile/change-password匹配，因此ProfileComponent会被渲染，然后子路线会被匹配

从父级移除确切的道具

<Router history={history}>
     <div>
       <Route path="/profile" component={ProfilePageComponent}/>
    </div>
</Router>

P.S。永远记住，如果您有嵌套的路线，则一定不要使用精确属性，而对多条路线使用Switch组件

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

1 个答案: