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} /> 这样的代码，代码会更加简洁和可靠

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>