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>
发布了46 篇原创文章 · 获赞 28 · 访问量 20万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览