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

react中实现在js中内部跳转路由，有两种方法。

方法一：

import PropTypes from 'prop-types';
export default class Header extends Component {static contextTypes = {router: PropTypes.object.isRequired,}constructor(props) {super(props);this.state = {keyword:"",channelList:[]};this.handleToSearch=this.handleToSearch.bind(this);}handleToSearch() {if(this.state.keyword){this.context.router.history.push(`/news_list/search/${this.props.channelId}/${this.state.keyword}`)}}render() {return (<div className="wrapper">小星星小星星</div>
        );}
}

方法二：

this.props.history.push('/download')

跳转到外链：

window.location.href = 'https://你的url'

在页面中给一个按钮绑定绑定跳转，如果跳转到项目的路由，引入react-router的Link

使用<Link to="/download">下载</Link> 形式跳转，如果希望页面从新页面打开,加

 target="_blank"

如果跳转到一个外链，使用a标签，如果希望页面从新页面打开，除了加target,

 target="_blank"

还要加一个rel:

<span><a href="https://internal.zhongwentoutiao.com/admin/news_list" target="_blank" rel="noopener noreferrer">管理员入口</a></span>

转载于:https://www.cnblogs.com/beileixinqing/p/9529433.html

react跳转url，跳转外链，新页面打开页面相关推荐

WordPress外链新窗口打开并使用php页面go跳转
之前浏览别人的博客网站,打开外链时会有一个等待时间的代码,虽然不知道有什么用,但觉的挺有档次..今天正好看到教程,就自己也加上了,就复制粘贴些代码可以了首先创建一个php文件,名字随便,如果你不想改 ...
react的行内样式和外链样式
一.行内样式如果你的行内样式没有生效,看一下是不是写少了一个花括号 export default class MyStyle extends Component {render() {return ...
2022新URL网址SEO外链自动发布网站源码+LayUI开发
正文: 这外链工具UI方面非常好看,源码开源无加密,解压至服务器压缩即可使用,使用Layui框架编写的,已经收集了9602条优秀链接,包括/百度/爱站等等,填写域名后点击确定,然后切换其他画面做其他事 ...
vue ios微信小程序跳转外链地址，返回页面执行自动后退或关闭页面
需求是页面外跳后,返回到项目首页,判断上一页有没有,有则后退一页,没有则关闭微信浏览器处理方案: 创建refresh.js 文件在index.html 文件中引入 home.vue // 在首页先 ...
a标签新窗口打开页面跳转sessionStorage丢失
Chrome更新89版本后,sessionStorage丢失a标签跳转丢失sessionStorage 最简单的解决办法 - a标签添加属性 rel="opener" Chrome ...
excel文件外链多了打开慢怎么办
就t miao这么办单个文件设置全局设置
Web安全-URL跳转与钓鱼
概述 URL跳转事件是比较常见的,比如,登陆网页以后,从登陆页面跳转到另一个页面,这就叫做URL跳转,但是URL跳转怎么和网络钓鱼联系在一起呢?下面将详细介绍URL跳转与钓鱼. URL重定向漏洞也称U ...
网站外链发布手册-如何发布有效外链
一.什么是网站外链?网站外链的作用?什么是外链?做外链的目的是什么? 外链就是指在别的网站导入自己网站的链接.导入链接对于网站优化来说是非常重要的一个过程.导入链接的质量(即导入链接所在页面的权重)间 ...
外链分享已取消无法下载怎么办_微信升级外链规范：“砍一刀”、“帮我加速吧”将被封禁...
北京商报讯(记者魏蔚)朋友圈.微信群遍布的购物分享链接,再度受到微信严控.10月18日晚间,微信宣布,外链规范即将进行更新升级,新增和细化多项外链规则,包括不可违规使用用户头像:不可诱导.误导下载/跳 ...

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

react跳转url，跳转外链，新页面打开页面相关推荐

最新文章

热门文章