Question

我正在使用这个名为react-router-modal的库，它提供了一些实用程序来创建具有反应路由器路由的模态。

当前正在尝试实现类似于Twitter的“ view tweet” UI的功能，因此我将以其术语为例。如果您不熟悉，Twitter将在当前页面的顶部打开一个包含推文和回复的模式。

一条推文应该有自己的路线，例如/tweet/:id。在我的应用程序的根目录级别的Switch中，我还有几个页面：

<Switch>
  <Route path="/user/:username" component={UserPage} />
  <Route path="/" component={Dashboard} />
</Switch>

然后，我为“ tweet”模式声明路线：

<ModalRoute
  path="/tweet/:tweetId"
  parentPath={/* what route to load when Modal is closed */}
  component={ModalTweet}
/>

当我坐在/上的“仪表板”页面上时，此方法工作正常。但是，如果我在UserPage上并尝试打开此模式，则路径将更改为/tweet/12345，并且在Tweet模式打开时，该根级别的Switch默认在后台显示在Dashboard页面。

我想告诉UserPage组件：“ /user/xyz”路径获取后，“继续并继续呈现先前的路径（/tweet/:tweetId），就好像路径没有改变一样”活性。这是否可能，如果没有，我是否可以对此处的结构进行某些处理以使其按预期工作？我知道react-router-last-location，但不知道如何将其输出应用于此问题，除了将其值传递给ModalRoute的parentPath（如果设置了ModalRoute的“背景”内容，你想知道）。

我考虑过使用通配符来处理/user/xyz/tweet/123之类的路径，但是出于某些原因，我不希望采用这种通配符。我考虑的另一件事是，当路线更改时，将前一条路径中的:userId作为单独的道具传递到UserPage组件中，并设置了一条路线，使其在这种情况下可以代替仪表板呈现，但是这感觉很混乱并且恐怕这将导致UserPage的重新安装，并可能丢失滚动位置等。还没有尝试过，所以如果那是最好的选择，那我会的。

提前感谢您的任何建议！我是React Router的新手。

编辑：这是问题的一个很好的例证，不是我自己造的：https://codesandbox.io/s/yq1kkppp19

请注意，上面的示例并未涵盖我的问题的所有复杂性：我需要路径数据来呈现基础页面并呈现模式的内容。在该示例中，没有路径参数在起作用。

反应路由器中是否可能有多个“活动”路由？

0 个答案: