React-router-dom，路由組件不渲染

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>

當我將 go 移至/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>

PS 永遠記住，如果你有嵌套的路由，你一定不能使用精確的屬性，而是對多個路由使用Switch組件