专栏首页前端小叙react跳转url,跳转外链,新页面打开页面

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js实现单张或多张图片持续无缝滚动

    想要实现图片持续滚动,既然使用js,就千万不要加css动画、过渡等相关样式,如果想要滚动的平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重...

    蓓蕾心晴
  • react-router 4.3 js实现跳转

    蓓蕾心晴
  • react报错this.setState is not a function

    当报错这个的时候就要看函数是否在行内绑定this,或者在constructor中绑定this。

    蓓蕾心晴
  • (必考)关于JS中this关键字的说法,下面错误的是?

    当一个函数被调用时,拥有它的object会作为this传入。在global下,就是window or global,其他时候就是相应的object。

    舒克
  • java之StopWatch源码分析

    计时这个词语在生活中被应用的很普遍,体育竞赛时频繁出现的秒表,发令信号一经发出,秒表就在滴答滴答流转开始计时了,秒表此时的作用就是计时的代名词,在我们编写代码的...

    后端Coder
  • 地理位置计算之geohash算法

    最近在做共享单车单车的项目,用户打开APP后,如果根据当前的经纬度坐标获取附近的车辆呢?

    北溟有鱼QAQ
  • GD实战开发验证码

    GD GD库是php处理图形的扩展库,GD库提供了一系列用来处理图片的API,在网站上GD库通常用来生成缩略图,或者用来对图片加水印,或者用来生成汉字验证码,或...

    benny
  • 聊聊rocketmq的ScheduleMessageService

    rocketmq-all-4.6.0-source-release/store/src/main/java/org/apache/rocketmq/store/...

    codecraft
  • 一个只有99行代码的JS流程框架(二)

    前面写了一篇文章,叫《一个只有99行代码的JS流程框架》,虽然该框架基本已经能实现一个流程正常的逻辑流转,但是在分模块应用下还是缺少一定的能力,无法将一个页面中...

    张镇圳
  • 页面跳转,重定向,空控制器,空操作

    TP5\thinkphp\library\traits\controller\Jump.php

    公众号php_pachong

扫码关注云+社区

领取腾讯云代金券