javascript - react 路由器中的相对路由

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'>作为它的 child 。

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>