重定向到新选项卡时通过链接传递状态 [英] Pass state via Link while redirected to a new tab

问题描述

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

case 1: Redirected to a new route in the same tab.

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

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

When I type console.log(this.props.location.state); the state { foo: "bar" } get printed.

情况 2:重定向到新选项卡中的新路线.

case 2: Redirected to a new route in a new tab.

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

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

When I type console.log(this.props.location.state); the state becomes undefined.

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

My goal is to pass data to a new tab. Please guide me if there is any other way to achieve this in React.js. I just want to pass data to a new tab.

推荐答案

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

Since the _blank opens a new tab so it is another instance of your app even the app is the same app the internals are different. But you can use something like localStorage.

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

Since they will be persisted and will be shared for same origin you will have access to it in the new or any tab or window of your application. You need to query it in the component mount or after first render with and useEffect hook with a second parameter being probably empty array, []. For hooks checkout React docs if you use them.

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

Another way is to use the querystring. You can receive the query string from your opened comopenent instance.

我相信您可以使用任何其他持久性机制，例如索引数据库、Cookies 等

I am sure you can use any other persistense mechanism, like Indexed DB, Cookies, etc.

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

There are a few other ways coming into my mind under the umbrella web messaging; Broadcast Channel API, Window.postMessage, and Channel Messaging API that you may make use of.

如果状态相对较小，使用查询字符串可能会更好，或者 localStorage 是最简单的方法.如果您的数据更大，您可以使用索引数据库.它是异步的.只有当它完成写入时才小心，然后你会在你的新窗​​口、标签中看到它.

If you state is relatively small it mifght be good to use querystring, or localStorage is the easiest way to go. If your data way more bigger you can use Indexed DB. It is async. Only be careful when it completes write, then you get it in your new window, tab.

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

In persistence usage cases, write to persistence before you navigate, just wait the write process if it is async before you navigate (by opening new tab/window in your specific use case).

用户可以通过右键单击并从上下文菜单中选择来导航到新选项卡.在这种情况下，可以在右侧使用 页面可见性 API在 React 效果中单击页面(将其效果附加到 React 效果中，并为 React 效果添加一个空的第二个参数)并且数据可以再次写入持久性机制，上述机制之一，其余的我指的是打开标签将是相同的.

One might navigate to a new tab maybe by right clicking and selecting from the context menu. ın that case Page Visibility API can be used on the right clicked page in a React effect (attaching its effects in an React effect with an empty second argument to React effect) and the data can be written again to a persistence mechanism, one of above mentioned ones, and the rest I mean the operations in the opening tab will be the same.

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

Since the writing mechanism can be late and even it is a sync one opening of a new tab if it is not programmatical might happen before the writing is done. In that case the opening tab's React effect to read the data written might be early to read. To circumvent these workarounds like waiting via a setTimeout to read can be used simply, however, a programmatically correct and a guaranteedly timed way would be using one of the appropriate web messaging apis I have mentioned above like Broadcast Channel, postMessage, and Channel Messaging API.

这篇关于重定向到新选项卡时通过链接传递状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！