在react路由器中使用“在新选项卡中打开链接”打开时，无法获取位置状态
在React Router中，当你使用<Link>组件并设置target="_blank"属性来在新标签页中打开链接时，默认情况下，新标签页无法访问原页面的URL状态（即location.state）。这是因为出于安全考虑，浏览器不允许跨标签页访问数据。
基础概念
- React Router: 是React应用程序的路由解决方案，用于管理URL和页面内容的映射关系。
<Link>组件: 用于创建导航链接，可以设置to属性指定目标路径。target="_blank": HTML属性，用于在新标签页中打开链接。location.state: 在React Router中，可以通过location对象传递状态信息。
相关优势
- 安全性: 浏览器限制跨标签页访问数据，以防止恶意脚本窃取信息。
- 用户体验: 用户可以在新标签页中查看内容，而不会影响当前页面的状态。
类型
- 内部链接: 在同一应用内导航。
- 外部链接: 导航到其他网站或应用。
应用场景
- 当你需要在新标签页中打开一个链接，并且希望传递一些状态信息时。
问题原因
由于浏览器的同源策略和安全限制，新标签页无法直接访问原页面的location.state。
解决方法
- 使用URL参数: 将状态信息编码到URL查询参数中。
- 使用URL参数: 将状态信息编码到URL查询参数中。
- 使用
window.postMessage: 在新标签页加载完成后，通过postMessageAPI传递状态信息。 - 使用
window.postMessage: 在新标签页加载完成后，通过postMessageAPI传递状态信息。
参考链接
通过上述方法，你可以在新标签页中传递状态信息，同时确保应用的安全性和用户体验。
相关·内容
我正在使用React路由器，" react - Router -dom"："^5.1.2“这是根据我的package.json的react路由器版本。/page" referrer: 12}} rel='noopener noreferrer' >Page</Link> 所以，当我点击链接时，
浏览 19提问于2020-05-03得票数 0
我现在有一个锚标记，定义如下在控制器函数中，我使用ng存储($localStorage设置一些值，然后使用角ui路由器进入下一个状态。新链接将在新选项卡中打开。但是，当用户右键单击锚标签并
浏览 3提问于2015-04-01得票数 2
回答已采纳
我使用了react路由器doms的链接：但是这也会打开的新选项卡，使用href：打开新选项卡到，如何在新选项卡中只打开链接</
浏览 6提问于2017-11-23得票数 17
回答已采纳
我对的反应和反应很陌生--路由器，我已经挣扎了好几天了。联系将会是这样的：
<Link to="/root/the_page&quo
浏览 1提问于2017-11-14得票数 0
回答已采纳
第一次打开应用程序时，历史对象(由钩子返回)的长度为3。
react路由器-dom@5.1.2
浏览 1提问于2019-11-16得票数 1
回答已采纳
我正在为一个项目使用ReactJS和React Router (无重复)，我想以编程方式打开一个链接，但在一个新的选项卡上。我知道使用onClickNode={e => this.props.history.push('/${e.data.node.id}')}可以转到所需的链接，但问题是它会在相同的选项卡中打开。此外，没有办法在该函数中
浏览 45提问于2017-12-13得票数 39
我不使用redux。在单击按钮时，我希望在新选项卡中使用一些新的道具打开react组件的相同实例。问题是我不知道如何保持它们同步。
假设我有一个处于组件状态的数组，并且在组件中显示数组的内容。我希望更新的数组显示在组件中，该组件也在新选项卡中打开</
浏览 2提问于2020-03-23得票数 3
回答已采纳
1回答
我使用redux来存储我的状态。当我导航到同一页(多个组件，但在一个页面上)时，它可以正常工作。但当我在新选项卡/窗口中打开链接时，状态变为未定义。根据调查结果，当刷新页面或在新选项卡/窗口中打开时，预计redux状态将被重置。然后我想到的是在导航到另一个组件时将store
浏览 3提问于2018-10-28得票数 0
有一个非常酷的特性:如果你有一个项目列表(例如Instagram)，如果你点击一个项目，内容会在模式/覆盖中打开，但是如果你将链接复制粘贴到新的选项卡/窗口，或者与朋友共享链接，它就会在自己的页面中打开2表很大，~30列
如果用户单击post，它将以模式/覆盖打开。我将回收
浏览 1提问于2016-04-29得票数 0
回答已采纳
3回答
我试图创建一个按钮，在React打开一个外部链接到一个谷歌地图网址。
我有一个函数，它要求用户提供地理位置，一旦提供，就把位置输入到url链接中，该链接从他们的地理位置获取方向到一个设置的目的地。但是，我很难让按钮首先运行该函数，并在新选项卡中打开URL。我现在就是这样调用按钮组件的。<Button variant=&qu
浏览 0提问于2019-06-01得票数 7
如何打开带有路由器链接的新窗口，，但保持在相同的页面上，比如，(在新选项卡中右击->打开)，所以当我单击链接时，它将打开一个新选项卡，但不带我到新选项卡，我想停留在当前选项卡上。谢谢
浏览 2提问于2020-01-17得票数 1
1回答
我已经使用了React -路由器/react路由器-dom导航来响应SPA应用程序，这意味着有react router(router的附加层)开关语句，并根据路径选择： <Route我不确定这些外部导航是否会释放组件，我的猜测是，它们留在内存中(在DOM树中)。我的应用程序应该位于浏览器的一个页面/选项卡中，而我的应用程序应该有应用程序
浏览 2提问于2020-12-18得票数 1
在这个场景中，我从后端获取一个特定的URL，然后单击按钮，我必须在一个新的选项卡中打开该链接，并使用react-路由器加载当前选项卡中的一个组件。import { Button } from 'semantic-ui-react';
import { Link } from 'react-router-dom
浏览 1提问于2019-05-30得票数 0
回答已采纳
注意:我只使用比特币组件作为调试的衡量标准，我最终将包括此解决方案。coin.percent_change_24h}%</td> ))它加载组件没有问题，但是加载在相同的页面中但我正试着让它在新的一页中打开。我在呈现方法的开始和结束时声明了我的路由器组件。这与表的动态生成有关吗？
浏览 0提问于2018-02-02得票数 0
回答已采纳
我需要创建一个链接，当我单击"Box“组件时，该链接将在新选项卡中打开多个路由。我正在使用Redux，这是我正在遵循的模板，但我被卡住了，因为它似乎不是在新选项卡中打开的持久化状态(包含身份验证数据)。</Box>) 我尝试通过react-router-dom
浏览 47提问于2021-09-30得票数 0
2回答
我尝试使用React路由器中的Link在新选项卡中打开一个组件，它打开了一个404 not found而不是react组件。React入口点js，import { render } from 'react-dom';
import {
浏览 0提问于2016-08-19得票数 0
是否可以让状态策略在新选项卡中打开其链接？就像在<a>标记上设置属性target="_blank"一样。
浏览 3提问于2021-02-23得票数 0
1回答
工具: React 0.14.0，React路由器1.0.0，Vanilla Flux问题:由于多个组件依赖于currentThreadID，所以在打开路由时，我试图获取params并将它们添加到商店中。问题是，我无法在我的程序中找到我应该获取
浏览 1提问于2015-11-17得票数 0
我想将它们存储在应用程序状态中，因为其他组件可能会在另一个页面上使用一些设置，但是现在如果我单击任何其他选项卡并返回到前一个选项卡，该页面将显示初始状态(图表已消失，过滤数据消失，日期范围显示默认值，下拉显示默认的屁股
浏览 1提问于2018-03-20得票数 10
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
