前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react跳转url,跳转外链,新页面打开页面

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

作者头像
蓓蕾心晴
修改2022-08-19 13:39:14
11.1K0
修改2022-08-19 13:39:14
举报
文章被收录于专栏:前端小叙

react中实现在js中内部跳转路由,有两种方法。

方法一:

代码语言:javascript
复制
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>
        );
    }
}

方法二:

代码语言:javascript
复制
this.props.history.push('/download')

跳转到外链:

代码语言:javascript
复制
window.location.href = 'https://你的url'

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

使用<Link to="/download">下载</Link> 形式跳转,如果希望页面从新页面打开,加 

代码语言:javascript
复制
 target="_blank"

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

代码语言:javascript
复制
 target="_blank"

还要加一个rel:

代码语言:javascript
复制
<span><a href="https://internal.zhongwentoutiao.com/admin/news_list" target="_blank" rel="noopener noreferrer">管理员入口</a></span>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-08-24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档