react-router中的相對路由

Question

有誰知道如何為以'/ popup-image-：id'結尾的路徑創建文件？ 我有一個網站，可以在任何頁面的彈出窗口中打開每個圖像。 因此，如果我無法實現'/ popup-image-：id'，我必須將網站中的每條路線加倍以放置在內部。 我想避免冗余和脆弱。 我目前的路線：

<Router history={browserHistory}>
   <Route path="/" component={Base}>
      <Route path="profile" component={Profile}>
         <Route path="popup-image-:id" component={Full_Piture} />
      </Route>
      <Route path="feed" component={Feed_List}>
         <Route path="popup-image-:id" component={Full_Piture} />
      </Route>
      <Route path="user-:id" component={User_Page}>
         <Route path="popup-image-:id" component={Full_Piture} />
      </Route>      
   </Route>
</Router>

如您所見，我不得不產生很多重復的代碼。 如果我可以編寫類似<Route path="*/popup-image-:id" component={Full_Piture} />代碼，它將使代碼更<Route path="*/popup-image-:id" component={Full_Piture} />

Answer 1

父<Route>也應該匹配？ 如果不是，則應該可以使用**語法。

<Route path="/**/popup-image-:id" component={Full_Picture} />

如果父<Route>也應該匹配，則可以創建一個<RouteWithPopup>組件，該組件返回一個<Route> ，該組件具有<Route path='popup-image-:id'>作為其子代。

const RouteWithPopup = (props) => {
  return (
    <Route {...props}>
      <Route path="popup-image-:id" component={Full_Picture} />
    </Route>
  )
}

然后，您可以將路由配置轉換為：

<Router history={browserHistory}>
  <Route path="/" component={Base}>
    <RouteWithPopup path="profile" component={Profile} />
    <RouteWithPopup path="feed" component={Feed_List} />
    <RouteWithPopup path="user-:id" component={User_Page} />
  </Route>
</Router>