react 跳转URL,跳转外链,打开新页面,以及传值

方法一:

import PropTypes from 'prop-types';

export default class Header extends Component {

    static contextTypes = {

        router: PropTypes.object,

    }

    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 (

             

                  小星星小星星

             

        );

    }

}


方法二:

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

举个栗子:传参://中文需要用encodeURI转码

this.props.history.push('onlineDetail/?id='+rowData.id+'&name='+encodeURI(rowData.name));

接受参数的页面

let title=props.location.search.split('=');//将参数用=分割成数组

document.title=decodeURI(title[2]);//获取到想到的参数,并解码


跳转到外链:

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


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

使用下载 形式跳转,如果希望页面从新页面打开,加 

target="_blank"

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

target="_blank"

还要加一个rel:

管理员入口

你可能感兴趣的:(react 跳转URL,跳转外链,打开新页面,以及传值)