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>

react-router中的相对路由

1 个答案: