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

发布时间：2020-12-15 20:24:41 所属栏目：百科来源：网络整理

导读：react中实现在js中内部跳转路由，有两种方法。方法一： import PropTypes from ‘prop-types‘ ;export default class Header extends Component { static contextTypes = { router: PropTypes.object.isRequired,} constructor(props) { super(props); thi

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!