Javascript react路由器中的相对路由

有人知道如何创建以“/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>

正如你所看到的，我不得不产生大量重复的代码。如果我能写一些像

这样的东西，它会更干净、更可靠父级

也应该匹配吗？如果不是，您应该能够使用语法

如果父级

也应匹配，则可以创建一个

组件，该组件返回一个

，该

将

作为其子级

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

const RouteWithPopup=（道具）=>{
返回(
)
}

然后，您可以将路由配置转换为：

<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>

父级
是否也应该匹配？如果不是，您应该能够使用语法



如果父级
也应匹配，则可以创建一个
组件，该组件返回一个
，该
将
作为其子级

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

const RouteWithPopup=（道具）=>{
返回(
)
}

然后，您可以将路由配置转换为：

<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路由器版本？npm info react路由器版本显示3.0.0 npm列表--深度=0显示react-router@2.8.1Which您正在使用的反应路由器版本？npm信息反应路由器版本显示3.0.0 npm列表--深度=0显示反应-router@2.8.1Wow! 这对我很有用！谢谢我很高兴有这个解决方案购买的方式，也许你知道如何使这个路径“/**/弹出图像-：id”的所有链接？目前，我使用上下文位置获取当前路径，并在最后附加“/popup image-:id”。但我得到了恼人的警告：React路由器不支持s中的相对位置，所以不幸的是，您需要手动创建路径名。您收到了什么警告？感谢您的澄清。关于错误：我使用从路由器获得的位置路径名。然后我使用mobx反应库中的组件。它将位置路径名传播到任何需要它的内部组件。因此，错误是“MobX提供程序：提供的存储‘位置’已更改。请避免替换存储，因为更改可能不会传播到所有子级”是由提供程序生成的。我假设这个问题与mobx-react有关。您得到的警告肯定来自mobx-react。我对mobx不是特别熟悉，但也许这会很有用。哇！这对我很有用！谢谢我很高兴有这个解决方案购买的方式，也许你知道如何使这个路径“/**/弹出图像-：id”的所有链接？目前，我使用上下文位置获取当前路径，并在最后附加“/popup image-:id”。但我得到了恼人的警告：React路由器不支持s中的相对位置，所以不幸的是，您需要手动创建路径名。您收到了什么警告？感谢您的澄清。关于错误：我使用从路由器获得的位置路径名。然后我使用mobx反应库中的组件。它将位置路径名传播到任何需要它的内部组件。因此，错误是“MobX提供程序：提供的存储‘位置’已更改。请避免替换存储，因为更改可能不会传播到所有子级”是由提供程序生成的。我假设这个问题与mobx-react有关。您得到的警告肯定来自mobx-react。我对mobx不是特别熟悉，但这可能会有用。