使用react-router-dom在新标签页打开链接，而不是本页跳转

最新推荐文章于 2025-02-09 22:06:38 发布

1024小神

最新推荐文章于 2025-02-09 22:06:38 发布

阅读量4.1k

点赞数 1

分类专栏： HTML前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_44786530/article/details/133795095

版权

HTML前端专栏收录该内容

727 篇文章

订阅专栏

一般单页面应用，当你使用useNavigate时候的时候，用useNavigate来跳转，只能是在当前页面刷新跳转的，要想单独在一个tab页打开新页面，大概用三种方式。

第一种

使用link标签，配合target实现

<Link to="/record" target="_blank">
  /record
</Link>

第二种

使用a标签，配合target实现

<a href="/record" target="_blank">
  /record
</a>

第三种

使用window.open来实现

const navigateOutApp = () => window.open("/record", "_blank", "noreferrer");

...

<button type="button" onClick={navigateOutApp}>
  /record
</button>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

1024小神

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

react学习笔记，ReactDOM，react-router-dom

longshao_520的博客

10-22

1001

react学习笔记，ReactDOM，react-router-dom

react-router-dom V6 中文文档教程总结

xm1037782843的博客

10-21

1万+

react-router-dom v6 使用文档教程 react-router-dom

参与评论您还未登录，请先登录后发表或查看评论

react 页面跳转（点击事件、history、Link）

殇之何伤的博客

02-14

1万+

1、页面点击本地页面打开新页面引入ant的Button组件 <Button style={{backgroundColor:'#F0F2F5'}} onClick={()=>{window.location.href="https://baidu.com"}} className="r-button" > 引入import {Link} from 'react-...

react跳转页面并且打开弹窗

博客

02-02

1804

react实现页面跳转并且打开跳转后页面的弹窗

react跳转路由，使用useNavigate的useNavigate

最新发布

qq_34631220的博客

02-09

126

【代码】react跳转路由，使用useNavigate的useNavigate。

react-tabs:极其简单灵活的标签页

05-19

React标签极其简单灵活的标签页正在安装 npm i @starnavi/react-tabs 或者 yarn add @starnavi/react-tabs 基本范例 import { Tab , Tabs , TabList , TabPanels , TabPanel } from '@starnavi/react-tabs' ; export default ( ) => ( < Tabs> < TabList> < Tab> First Tab < / Tab > < Tab> Second Tab < / Tab > < / TabList > < TabPanels> < TabPanel> < h2> First Tab Content < / h2 > <

React Ant design 中新开一个新的浏览器标签页window.open

runrun117的博客

09-03

2238

window.open（'新的标签页的内容'）如果直接写www.baidu.com的话，会出错，会在原有的路由路径中拼接上新的url 如果浏览器中url显示http://172.16.3.111:8000/chat/chatBot/index 在使用window.open('www.baidu.com')后，新开的页面url为：http://172.16.3.111:8000/chat/chatBot/www.baidu.com 这个显然不是想要的，需要使用在url中http的头所以需要.

react/vue打开新标签页

qq_34955596的博客

11-19

1173

废话不多说，，上代码 try { const a = window.document.createElement('a'); // 判断是否有参数 if (search) { a.setAttribute('href', `${url}?${search}`); } else { a.setAttribute('href', `${url}`); } a.setAttribute('target', '

React点击链接，在（浏览器）新窗口打开

cxywai的博客

07-01

2069

const w=window.open('about:blank');w.location.href='你的地址'

react 工程实现按钮点击打开一个新的页签

luzhaopan的博客

12-17

7302

import React, { PureComponent } from 'react'; export default class lt extends PureComponent { state = { host: '', } lzp= () => { const w = window.open('about:blank'); const {...

react-router-dom-demo

07-21

然而，`Link`的`state`属性有一个限制：当使用`target="_blank"`属性使链接在新窗口或标签页中打开时，`state`信息将不会被传递。这是因为新窗口或标签页是完全独立的浏览上下文，它们无法访问原窗口的`state`信息。...

react-new-window:using使用`window.open`在React中弹出新窗口

05-07

受到（启发。特征仅2.68KB （已压缩！）。支持完整的window.open api 。为React 16构建（使用ReactDOM.createPortal ）。阻止弹出窗口的处理程序（通过onBlock prop）。根据父窗口或屏幕使弹出窗口居中。安装 npm i react-new-window --save 用法 import React from 'react' import NewWindow from 'react-new-window' const Demo = ( ) => ( < NewWindow> < h1> Hi :waving_hand: < / h1 > < / NewWindow > ) 装入<NewWindow>将打开一个弹出窗口。卸载后，弹出窗口将关闭。 children内容将呈现到新的弹出窗口中。在这种情况下， Hi

react-router-dom v6的基本使用

qq_45750263的博客

12-12

4818

在react中使用react-router

React路由-react-router-dom安装与使用(一)

此鱼非闲鱼也的博客

07-14

4712

路由当应用变得复杂的时候，就需要分块的进行处理和展示。传统方式的处理:把整个应用分成了多个页面，然后通过 URL 进行连接。传统方式的弊端: 每次切换页面都需要重新发送所有请求和渲染整个页面，性能上会有影响；会导致整个 JavaScript 重新执行，丢失状态。单页面应用单页面应用SPA(Single Page Application): 整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容。 **单页面应用优缺点**如下：

React Route打开新窗口出现Not Found

m0_37068028的博客

09-06

3217

React Router 是建立在 history 之上的。有三种记录路由历史记录的方式：hashHistory、browserHistory和createMemoryHistory。 hashHistory 使用 URL 中的 hash（#）部分去创建形如 example.com/#/some/path 的路由。 browserHistory 它使用浏览器中的 History API 用于处理 U

react hook 页面跳转打开新页面

Hero_rong的博客

08-23

8308

react跳转页面的话，可以用 Link 也可以用 a 标签，但是这两种比较固定，如果想在跳转的时候添加一些方法就很不方便，所以我们最好是写在 onClick 事件里面 <Button onClick={()=>{jumpTo()}}></Button> const jumpTo = ()=> { const w = window.open('_black') //这里是打开新窗口 let url = '这里是url，可以写../../index，

react跳转url，跳转外链，新页面打开页面