博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react跳转url,跳转外链,新页面打开页面
阅读量:6441 次
发布时间:2019-06-23

本文共 1010 字,大约阅读时间需要 3 分钟。

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 (
小星星小星星
); }}

方法二:

this.props.history.push('/download')

跳转到外链:

window.location.href = 'https://你的url'

 

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

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

target="_blank"

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

target="_blank"

还要加一个rel:

 

转载于:https://www.cnblogs.com/beileixinqing/p/9529433.html

你可能感兴趣的文章
Eclipse-Java代码规范和质量检查插件-PMD
查看>>
php实现上传图片保存到数据库的方法
查看>>
安卓应用安全指南 5.4.3 通过 HTTPS 的通信 高级话题
查看>>
针对CMS中的tag标签理解
查看>>
AR头显要上天!欧洲太空总署或用HoloLens维修太空站
查看>>
沃尔玛建立自家的人工智能网络,抗衡竞争对手亚马逊
查看>>
Mysql备份与还原及优化方法
查看>>
linux常用命令和选项
查看>>
sed 学习笔记(未完成)
查看>>
Eclipse保存验证JS缓慢
查看>>
2017 JMP Discovery Summit China圆满落幕
查看>>
9 Easy Steps for Successful Data Migration
查看>>
人工智能,不止于技术的革命--WOT2017全球创新技术峰会开幕
查看>>
mysql 在大型应用中的架构演变
查看>>
ibm系列文章 --> Windows 到 Linux 之旅
查看>>
全备份失败后,如何手工清除exchange日志文件,附微软KB
查看>>
java如何连接mysq之源码l讲解
查看>>
企业运维笔试考题(1)
查看>>
Mysql修改存储过程相关权限问题
查看>>
4.2权限管理
查看>>