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 (

              <div className="wrapper">

                  小星星小星星

              </div>

        );

    }

}


方法二:

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

使用<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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容