**case 1:**已重定向到同一选项卡中的新路由。
<Link to={{ pathname: "/modify_items", state: { foo: "bar" } }} >
当我输入console.log(this.props.location.state);
时,会打印状态{ foo: "bar" }
。
**case 2:**已重定向至新选项卡中的新路由。
<Link to={{ pathname: "/modify_items", state: { foo: "bar" } }} target="_blank" >
当我键入console.log(this.props.location.state);
时,状态变为undefined
。
我的目标是将数据传递到新选项卡。如果在React.js中有其他方法可以实现此目标,请指导我。我只想将数据传递到新选项卡。
4条答案
按热度按时间dtcbnfnu1#
我认为这是不可能的链接状态。因为如果你离开页面,你的内存将是干净的。你可能想使用查询或路径参数,如果你想在不同的标签共享状态。
对于路径参数:Get path params in react-router v4
对于查询变量:按如下方式设置链接:
<Link to={{ pathname: '/foo', query: { foo: "bar" } }}/>
并使用一个库来获取查询参数,例如https://www.npmjs.com/package/query-string。
huus2vyu2#
由于
_blank
会打开一个新的标签页,所以它是你的应用程序的另一个示例,即使应用程序是同一个应用程序,内部也是不同的。由于它们将被持久化并共享给同一个源,您将可以在新的或应用程序的任何标签或窗口中访问它。您需要在组件挂载中查询它,或者在第一次渲染后使用
useEffect
挂钩,第二个参数可能是空数组[]
。对于挂钩,如果您使用它们,请 checkout React docs。另一种方法是使用
querystring
。您可以从打开的组件示例接收查询字符串。我确信您可以使用任何其他持久化机制,如索引DB、Cookie等。
在网络消息的保护伞下,还有一些其他的方式进入我的脑海; Broadcast Channel API、Window.postMessage和Channel Messaging API,您可以使用这些选项。
如果你的状态相对较小,那么使用querystring可能会更好,或者localStorage是最简单的方法。如果你的数据更大,你可以使用索引DB。它是异步的。只有当它完成写入时才要小心,然后你会在新窗口中看到它,标签。
在持久性使用案例中,在导航之前写入持久性,如果是异步的,只需等待写入过程,然后再导航(通过在特定使用案例中打开新的选项卡/窗口)。
一个人可能导航到一个新的标签,可能通过右键点击并从上下文菜单中选择。在这种情况下,Page Visibility API可以在React效果中的右键点击页面上使用(将其在具有空的第二自变量的React效果中的效果附加到React效果),并且数据可以再次被写入到持久机制,上述机制之一,其余的我的意思是在打开选项卡中的操作将是相同的。
由于写入机制可能会延迟,甚至是同步,因此,如果未编程,则新标签页的一次打开可能会在写入完成之前发生。在这种情况下,打开标签页的读取写入数据的React效果可能会提前读取。然而,为了避免这些变通办法,例如通过
setTimeout
等待读取,可以简单地使用:一个程序上正确的和保证定时的方法是使用我上面提到的适当的web消息传递API之一,如广播频道、postMessage和频道消息传递API。gkn4icbw3#
无法通过
React Router
进行。但您可以使用
localStorage
来保存一些东西,然后再重定向到新选项卡,然后检查新选项卡上的localStorage
中是否存在一些东西。nvbavucw4#
这对我很有效:
下一步: