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 条评论
登录 后参与评论

相关文章

来自专栏西安-晁州

thinkjs crud练习

今天看了下thinkjs(v2.1.7),做了一个简单的入门demo,基于mysql数据库增删改查,详细源码如下: 页面整体展示: ? 会员新增: ? 删除: ...

2910
来自专栏黒之染开发日记

使用reactJS要注意的地方

虽然react使用的jsx可以html和js混编,但是这里的html用的时候有的地方还是和原来的习惯不太一样。这里汇总一些我已经遇到的不一样,还有其他要注意的地...

1392
来自专栏技术博客

ExtJs七(ExtJs Mvc创建ViewPort)

在4.1的时候,要先创建一个扩展于Ext.app.Application的类,然后用create创建它的实例来开始应用程序的。而在4.1.1,则可直接调用app...

1314
来自专栏一个会写诗的程序员的博客

功能强大的jQuery图片查看器插件

2651
来自专栏小夜博客

使用VNC安装Debian系统图文教程

44414
来自专栏葡萄城控件技术团队

纯前端表格控件SpreadJS与Java结合,实现模板上传和下载等功能

您可直接解压到 eclipse 的 workspace 下,导入 Existing Projects into Workspace 工程即可。

3292
来自专栏.Net移动开发

Smobiler 4.4已正式发布!(Smobiler能让你在Visual Studio上开发APP)

Smobiler 4.4已经正式发布,还不快来看看? 原文地址:https://www.smobiler.com/portal.php?mod=view&aid...

5412
来自专栏技术小黑屋

Atom订阅转成RSS2.0

Octopress博客自带的只Atom协议的订阅,但是最近提交收录网站时,需要使用RSS协议。于是利用周末简单实现了一下。

1712
来自专栏Petrichor的专栏

Windows: 禁用开机启动项

因为寒假在家需要写专利,所以把笔记本刷成了Windows10。遇到了每次开机微信都会自启动的问题,身为简洁控强迫症对此感到贼烦。

2881
来自专栏Golang语言社区

Golang语言 Socket

1. Socket 简介 常用的 Socket 类型有两种:流式 Socket(SOCK_STREAM)和数据报式Socket(SOCK_DGRAM)。 流式是...

3918

扫码关注云+社区

领取腾讯云代金券