基于 react-router 4.0 版本,我们想要通过 JS 手动控制路由跳转,分三步:

第一步:引入 propTypes

const PropTypes = require('prop-types');

第二步:定义context 的router属性

BottomNavigationExampleSimple.contextTypes = {
router: PropTypes.object
}

第三步:控制跳转

 handleClick= () => {
this.context.router.history.replace('/index')
};

react-router-dom 手动控制路由跳转的更多相关文章

  1. 【React踩坑记二】react项目实现JS路由跳转

    这里使用的是4.31版本的react-router-dom "react-router-dom": "^4.3.1", 直接使用以下代码即可实现路由跳转 thi ...

  2. vue路由--使用router.push进行路由跳转

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 route-link是在html中静态定 ...

  3. router.push query 路由 跳转 传参使用

    this.$router.push({path:'/shop',query:{ goods_name:goods_name, goods_price:goods_price, uid:goods_pr ...

  4. React router 4 获取路由参数,跨页面参数

    1. match通过路径 <Route path="/path/:name" component={example} /> 路由组件内获取参数使用 this.props ...

  5. React:快速上手(6)——掌握React Router

    React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...

  6. React Router学习笔记(转自阮一峰老师博客)

    React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 impor ...

  7. vue里使用element饿了么的el-menu+vue-router实现路由跳转的两种方法

    最近准备写一个echarts的可视化展示案例,首先用vue-cli3创建了一个项目(好像vue-cli4也出来,感觉变化不大,就没升级了) 然后,开始配置路由↓下面是我的router.js文件 imp ...

  8. react router @4 和 vue路由 详解(七)react路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...

  9. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

随机推荐

  1. Photoshop中比较实用的小技巧

    Photoshop是目前最流行的图片处理软件软件之一.能够说,只要接触图片处理,就要和它打交道.Photoshop的强大功能和众多的优点不用多说.用photoshop做一些漂亮的图片,或对照片进行简单 ...

  2. CreateThread

    CreateThread(NULL,0,ReportResultThread,this,0,&g_dwThreadId) 2. 参数说明: 第一个参数 lpThreadAttributes 表 ...

  3. Jmeter发送某个request时而成功,时而失败(处理办法:失败的时候尝试重新发送这个HTTP request)

    Jmeter发送某个request时而成功,时而失败 Maybe it’s Jmeter’s problem, after all, is not a commercial software. And ...

  4. 482. License Key Formatting

    static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); class Solution { publ ...

  5. 2018.07.25 hdu5306Gorgeous Sequence(线段树)

    传送门 线段树基本操作. 要求维护区间取min" role="presentation" style="position: relative;"> ...

  6. Linux下一个简单sniffer的实现

    Sniffer(嗅探器)是一种基于被动侦听原理的网络分析方式.将网络接口设置在监听模式,便可以将网上传输的源源不断的信息截获.对于网络监听的基本原理我们不在赘述,我们也不开启网卡的混杂模式,因为现在的 ...

  7. hibernate hql where语句拼接工具类

    package com.zhaoshijie.tree.other; /** * hibernate HQL WHERE语句工具类 * * @author 赵士杰 * */public class H ...

  8. IDEA如何初始化Git本地仓库,并提交到远程仓库

    本文转载自:http://blog.csdn.net/two_people/article/details/77008593 1. 首先在远程仓库上新建一个项目,码云和github都可以,我这里使用的 ...

  9. 用Node完成AWS S3的Upload流程之全世界最简版

    开场: 查了两天文档,Error了38次,最后索性去掉所有附加条件, 连界面也不要了,在命令行里跑通了一坨最干瘪的Upload流程! 还冒着热气…… 在此先做记录,明天可以搭配美美的界面继续调试了. ...

  10. (网络流 最大流 Dinic || SAP)Control -- hdu --4289

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=4289 http://acm.hust.edu.cn/vjudge/contest/view.action ...