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>