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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章