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

aiqt4smr  于 2022-12-12  发布在  React
关注(0)|答案(4)|浏览(121)

**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中有其他方法可以实现此目标,请指导我。我只想将数据传递到新选项卡。

dtcbnfnu

dtcbnfnu1#

我认为这是不可能的链接状态。因为如果你离开页面,你的内存将是干净的。你可能想使用查询或路径参数,如果你想在不同的标签共享状态。
对于路径参数:Get path params in react-router v4
对于查询变量:按如下方式设置链接:
<Link to={{ pathname: '/foo', query: { foo: "bar" } }}/>
并使用一个库来获取查询参数,例如https://www.npmjs.com/package/query-string

huus2vyu

huus2vyu2#

由于_blank会打开一个新的标签页,所以它是你的应用程序的另一个示例,即使应用程序是同一个应用程序,内部也是不同的。
由于它们将被持久化并共享给同一个源,您将可以在新的或应用程序的任何标签或窗口中访问它。您需要在组件挂载中查询它,或者在第一次渲染后使用useEffect挂钩,第二个参数可能是空数组[]。对于挂钩,如果您使用它们,请 checkout React docs。
另一种方法是使用querystring。您可以从打开的组件示例接收查询字符串。
我确信您可以使用任何其他持久化机制,如索引DBCookie等。
在网络消息的保护伞下,还有一些其他的方式进入我的脑海; Broadcast Channel APIWindow.postMessageChannel Messaging API,您可以使用这些选项。
如果你的状态相对较小,那么使用querystring可能会更好,或者localStorage是最简单的方法。如果你的数据更大,你可以使用索引DB。它是异步的。只有当它完成写入时才要小心,然后你会在新窗口中看到它,标签。
在持久性使用案例中,在导航之前写入持久性,如果是异步的,只需等待写入过程,然后再导航(通过在特定使用案例中打开新的选项卡/窗口)。
一个人可能导航到一个新的标签,可能通过右键点击并从上下文菜单中选择。在这种情况下,Page Visibility API可以在React效果中的右键点击页面上使用(将其在具有空的第二自变量的React效果中的效果附加到React效果),并且数据可以再次被写入到持久机制,上述机制之一,其余的我的意思是在打开选项卡中的操作将是相同的。
由于写入机制可能会延迟,甚至是同步,因此,如果未编程,则新标签页的一次打开可能会在写入完成之前发生。在这种情况下,打开标签页的读取写入数据的React效果可能会提前读取。然而,为了避免这些变通办法,例如通过setTimeout等待读取,可以简单地使用:一个程序上正确的和保证定时的方法是使用我上面提到的适当的web消息传递API之一,如广播频道postMessage频道消息传递API

gkn4icbw

gkn4icbw3#

无法通过React Router进行。
但您可以使用localStorage来保存一些东西,然后再重定向到新选项卡,然后检查新选项卡上的localStorage中是否存在一些东西。

nvbavucw

nvbavucw4#

这对我很有效:

<Link to="/onboarding/profile" state={{ from: "occupation" }}>
    Next Step
</Link>

下一步:

import { useLocation } from 'react-router-dom'
function Profile () {
    const location = useLocation()
    const { from } = location.state
    return (
      ...
    )
}

相关问题