首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将target=_blank添加到react中的link tag in按钮不会打开新页面,但会禁用它?

在React中,可以使用<a>标签和<Link>组件来创建链接。然而,React中的<Link>组件不支持target="_blank"属性,因为React通过单页面应用(SPA)的方式进行路由,不会像传统的<a>标签一样刷新整个页面。

要在React中实现类似于target="_blank"的功能,可以通过react-router-dom库提供的<Route>组件和window.open()方法来实现。具体步骤如下:

  1. 首先,安装react-router-dom库。在终端中运行以下命令:
  2. 首先,安装react-router-dom库。在终端中运行以下命令:
  3. 在需要添加链接的组件中,引入所需的依赖:
  4. 在需要添加链接的组件中,引入所需的依赖:
  5. 在组件的render方法中,使用<Route>组件来定义要跳转的路径和链接的内容:
  6. 在组件的render方法中,使用<Route>组件来定义要跳转的路径和链接的内容:

通过上述步骤,我们可以在React中模拟target="_blank"的效果,点击按钮时会在新的标签页中打开指定的链接。

在这个例子中,我们使用了window.open()方法来在新标签页中打开链接。你可以将https://example.com替换为你需要打开的实际链接。

需要注意的是,在使用window.open()方法时,浏览器可能会将其视为弹出窗口,并可能会被浏览器的弹出窗口阻止器拦截。要避免这种情况,你可以在用户点击按钮时给出相应的提示,告知他们需要允许弹出窗口。

关于腾讯云的相关产品和介绍链接,可以参考以下内容:

请注意,这只是一些建议的腾讯云产品,你可以根据实际需求选择适合的产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 一个来自create-react-app脚手架警告思考

    最近在开发一个react项目,项目是用create-react-app脚手架创建,当我在我项目的菜单栏添加了一个打开一个外链a标签时,我收到了一个来自create-react-app警告信息,...查阅了一些资料得到了如下关于a标签一个介绍 当一个外部链接使用了target=_blank方式,这个外部链接会打开一个新浏览器tab。此时,新页面打开,并且和原始页面占用同一个进程。...主要是两个点是我以前从未在意target="_blank"方式打开tab和原始页面占用同一个进程(UI进程) 新打开页面能获取到原始页面的document。...上图解释: 首先打开了第一个页面,第一个页面只有一个“打开一个新页面a标签 点击这个链接,打开了一个新页面新页面中有一个按钮,“告诉打开那个页面,我喜欢林志玲”。...按照create-react-app提示信息,给连接加上rel属性,如下: <a rel="noopener noreferrer" target="_blank" href="https://marvengong.github.io

    55620

    ReactRouter实现

    描述 React Router是建立在history对象之上,简而言之一个history对象知道如何去监听浏览器地址栏变化,并解析这个URL转化为location对象,然后router使用它匹配到路由...,但不会被包括在HTTP请求,即#及之后字符不会被发送到服务端进行资源或数据请求,其是用来指导浏览器动作,对服务器端没有效果,因此改变Hash不会重新加载页面。...ReactRouter路由拆成了几个包: react-router负责通用路由逻辑,react-router-dom负责浏览器路由管理,react-router-native负责react-native...在handleClick,对没有被preventDefault、鼠标左键点击、非_blank跳转、没有按住其他功能键单击进行preventDefault,然后push进history,这也是前面讲过路由变化与...this.props.target || this.props.target === "_self") && // let browser handle "target=_blank" etc.

    1.4K10

    利用 target=_blank 进行前端钓鱼

    为什么大部分国外网站内链接不用 target="_blank"新窗口打开? Google 都是当前窗口打开;Baidu/Bing 都是新窗口打开。 用户无法控制它在本页打开还是新窗口打开。...新窗口打开使任务栏更加地拥挤。 新窗口打开增加浏览器资源消耗。 新窗口打开是后退按钮变得不可用。 用户更加期望新页面在当页载入 ---- 以上,并不是我们讨论重点!...你可能不会注意到这一点,因为焦点位于新窗口中恶意页面上,而重定向发生在后台。...,使用了 target="_blank",那么一旦用户点击这个链接并进入一个新标签,新标签页面如果存在恶意代码,就可以将你网站直接导航到一个虚假网站。...="_blank"打开新窗口,跟原来页面窗口共用一个进程。

    50030

    谈谈HTML锚点及其使用

    如果没有元素没有href属性的话,可以作为原本链接位置占位符,常用于home链接 【推荐:html文档】 注意: 任何文档流内容都可以被嵌套,只要不是交互内容类别(如按钮、链接等) 属性 href...若href留空,会刷新页面 href与src区别 href(hypertext reference)指超文本引用,表示当前页面引用了别处内容 src(source)表示来源地址,表示把别处内容引入到当前页面...target属性表示链接打开方式 1、_self 当前窗口(默认) 2、_blank 新窗口 3、_parent 父框架集 4、_top 整个窗口 5、_framename 指定框架 //外层框架...="_self">chap1(_self) chap2(_blank)<...(对于chrome使用prerender) search 用于搜索当前文档或相关文档资源 tag 给当前文档打上标签 【应用】当一篇篇幅很长文章需要多页显示时,配合next

    3.4K30

    Hexo主题 | Hexo-yilia配置

    themes/yilia 其中/languages存放语言包,/layout存放主题布局文件,/source存放静态文件,如图片,图标等,/source-src存放外部引用资源 添加新页面 打开/...date: 2019-09-06 17:53:09 tags: [hexo,学习笔记] categories: [hexo,学习笔记] --- 设置打赏 二维码图片放到/yilia/source/img... 打开主题目录下_config.yml文件,在reward_wording处修改 # 打赏 # 打赏type设定:0-关闭打赏; 1-文章对应md文件里有reward:true属性,才有打赏; 2...-- more --> 可在/yilia/_config.yml修改: # 文章太长,截断按钮文字 excerpt_link: more # 文章卡片右下角常驻链接,不需要请设置为false show_all_link... 在/yilia/_config.yml添加: leftimg: 图片链接,不加引号即可

    1.1K20
    领券