在重定向到新选项卡时通过链接传递状态

Question

案例 1： 重定向到同一选项卡中的新路线。

<Link to={{ pathname: "/modify_items", state: { foo: "bar" } }} >

当我输入 console.log(this.props.location.state); 时，状态 { foo: "bar" } 会被打印出来。

案例 2： 重定向到新标签中的新路线。

<Link to={{ pathname: "/modify_items", state: { foo: "bar" } }} target="_blank" >

当我输入console.log(this.props.location.state); 时，状态变为undefined。

我的目标是将数据传递到新选项卡。如果有任何其他方法可以在 React.js 中实现这一点，请指导我。我只想将数据传递到新标签页。

Answer 1

我认为这在链接状态下是不可能的。因为如果你离开页面，你的记忆就会很干净。如果您想在不同的选项卡上共享状态，您可能需要使用查询或路径参数。

对于路径参数： Get path params in react-router v4

对于查询变量： 如下设置链接：

<Link to={{ pathname: '/foo', query: { foo: "bar" } }}/>

并可能使用库来获取查询参数。如https://www.npmjs.com/package/query-string。

Answer 2

无法通过React Router 实现。

但是您可以使用localStorage 在重定向到新标签之前将某些内容保存在那里，然后检查新标签上的localStorage 中是否存在某些内容。

Answer 3

由于_blank 打开了一个新选项卡，因此它是您应用的另一个实例，即使该应用是同一个应用，内部结构也不同。但是你可以使用localStorage之类的东西。

由于它们将被持久化并为同源共享，您将可以在应用程序的新标签或任何选项卡或窗口中访问它。您需要在组件安装中或在第一次渲染后使用 useEffect 钩子查询它，第二个参数可能是空数组 []。如果你使用钩子，请查看 React 文档。

另一种方法是使用querystring。您可以从打开的组件实例中接收查询字符串。

我相信您可以使用任何其他持久化机制，例如 Indexed DB、Cookies 等。

在伞形网络消息传递下，我想到了其他一些方法； Broadcast Channel API、Window.postMessage 和 Channel Messaging API，您可以使用。

如果您的状态相对较小，最好使用查询字符串，或者 localStorage 是最简单的方法。如果您的数据更大，您可以使用索引数据库。它是异步的。仅在完成写入时要小心，然后在新窗口选项卡中获取它。

在持久性使用案例中，在导航之前写入持久性，如果它是异步的，则在导航之前等待写入过程（通过在特定用例中打开新选项卡/窗口）。

可以通过右键单击并从上下文菜单中选择来导航到新选项卡。在那种情况下，Page Visibility API 可以在 React 效果中的右键单击页面上使用（将其效果附加到 React 效果中，第二个参数为空），并且可以将数据再次写入持久性机制，上述之一提到的，其余的我的意思是打开标签中的操作是一样的。

由于写入机制可能会延迟，即使它是同步的，如果不是以编程方式打开新选项卡，可能会在写入完成之前发生。在这种情况下，打开选项卡的 React 效果以读取写入的数据可能会提前读取。为了规避这些变通方法，例如通过setTimeout 等待阅读，可以简单地使用，但是，使用我上面提到的适当的网络消息传递 API 之一，如 广播频道、postMessage 和 Channel Messaging API。