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

无法通过React Router来实现。

但是您可以使用localStorage在此保存内容，然后再重定向到新标签，然后检查新标签上的localStorage中是否存在内容。

Answer 2

我认为使用Link状态是不可能的。原因是，如果您离开该页面，内存将很干净。如果要在不同选项卡上共享状态，则可能要使用查询或路径参数。

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

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

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

Answer 3

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

由于它们将被保留并共享给相同的来源，因此您将可以在应用程序的新窗口或任何选项卡或窗口中对其进行访问。您需要在组件安装中查询它，或者在使用useEffect进行首次渲染之后使用第二个参数可能是空数组[]进行查询。对于钩子，请检查React docs（如果使用它们）。

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

我确定您可以使用其他任何持久性机制，例如索引数据库， Cookie 等。

在伞式网络消息传递下，我想到了其他几种方式；您可能会使用的Broadcast Channel API，Window.postMessage和Channel Messaging API。

如果状态相对较小，则最好使用querystring，否则localStorage是最简单的方法。如果您的数据更大，则可以使用索引数据库。这是异步的。仅当它完成写时要小心，然后才能在新窗口的选项卡中获得它。

在持久性使用情况下，在导航之前先写入持久性，如果是asycn，则在导航之前等待其写过程（通过在特定用例中打开新的标签/窗口）。