最近在开发react的项目中,很多地方都是使用组件式的跳转方式,但是怎么样使用js去控制页面的跳转呢?

withRouter

withRouter 是一个高阶组件,把 match,location,history 三个对象注入到组件的 props 中。这是一个非常实用的函数,下面以四个小例子阐述它的用法。

1.与 redux 的 connect 配合

在项目中使用了 redux 来管理数据,当数据没有变化时,组件也就不会重新渲染。假设在组件中某个 Route 组件并未被渲染,数据也未发生变化,即便当前页面的链接发生了变化,也不会有任何的路由匹配该链接。因为这时候 Route 组件还是未被渲染!如何知道链接变化了呢?这时候就需要 withRouter 了。

import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Component))

2.页面的跳转

React Router 提供了 Link,NavLink 与 Redirect 组件来控制页面的跳转。但是我在一个 Button 的点击事件中控制页面的跳转,这几个组件就无法使用了。这里,或许你会想到使用 location 对象。

// 错误的方式!!!
location.href = '/article'  
这种方式可行,但不正确。如果先前使用的 BrowserRouter 变成 HashRouter 的话,这种方式就失效了。withRouter 封装的组件中的 props 包含 history,通过 history 对象来控制页面的跳转。history 对象有 push,replace 与 go 等方法,调用这些方式实现页面的跳转。
class Comoponent extends React.Component {
handleClick () {
this.props.history.push('/article')
}
}
export default withRouter(Component)

  

React---路由跳转的更多相关文章

  1. react 路由跳转问题

    1.采用Link方法跳转 <Link to="/Index2" > 不要用link,回不来,也不能next </Link> 2.用context控制路由跳转 ...

  2. 「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题

    前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目 ...

  3. vue 和 react 路由跳转和传参

                      react  1 .跳转方式加传参 this.props.history.push({ //地址 pathname: '/film/Details', //路由传参 ...

  4. 解决React路由跳转时出现的红色警告: Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.

    一.报警如图: 二.查找路由版本 我使用路由版本是4.3.1的,然后我测试所有4.0+版本都会出现以上警告. 三.未解决前的代码 三.我又解读了一下报警告内容的大致意思:就是props需要通过函数返回 ...

  5. react项目中引入了redux后js控制路由跳转方案

    如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...

  6. react第十四单元(react路由-react路由的跳转以及路由信息)

    第十四单元(react路由-react路由的跳转以及路由信息) #课程目标 理解前端单页面应用与多页面应用的优缺点 理解react路由是前端单页面应用的核心 会使用react路由配置前端单页面应用框架 ...

  7. react第十三单元(react路由-react路由的跳转以及路由信息) #课程目标

    第十三单元(react路由-react路由的跳转以及路由信息) #课程目标 熟悉掌握路由的配置 熟悉掌握跳转路由的方式 熟悉掌握路由跳转传参的方式 可以根据对其的理解封装一个类似Vue的router- ...

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

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

  9. react中路由跳转push与replace的区别

    路由跳转,replace / push 区别 push: a-b-c 可以回到上一级 例: this.props.history.push('路由地址') replace: a-b-c 回不到上一级 ...

  10. React native路由跳转navigate、push、replace的区别

    由于没有系统的去学习RN,对路由跳转了解不多,只是跟着项目在做,抽点时间简单学习一下RN路由跳转方法区别,总结如下: 如上图,外部是一个栈容器,此时A页面在最底部,navigate到B页面,为什么此时 ...

随机推荐

  1. Java 从匿名内部类到Lambda表达式

    匿名内部类和Lambda表达式有很多类似之处,首先都是在使用的时候才对接口进行实现,只是Lambda接口中只能由一个需要被实现的方法. 所有的Lambda表达式都可以 由匿名内部类改写: interf ...

  2. Amazing 2020

    Amazing 2020 Intro 2020 转眼即逝,2020 是比较艰辛的一年,因为疫情原因,很多人的工作以及生活都多多少少受到了一些影响. 引用网上盛传的一句话--2020 实"鼠& ...

  3. String--常见面试题

    String s = new String("xyz") 创建了几个对象? 实例分析1 javac编译代码,然后用javap来反编译,执行javap -c Test 从结果来看,l ...

  4. Istio 知多少 | 下一代微服务的守护者

    1. 引言 在写完eShopOnContainers 知多少[12]:Envoy gateways后,就一直想进一步探索Service Mesh,最近刚在极客时间上学完<Service Mesh ...

  5. 阿里面试:MySQL如何设计索引更高效?

    有情怀,有干货,微信搜索[三太子敖丙]关注这个不一样的程序员. 本文 GitHub https://github.com/JavaFamily 已收录,有一线大厂面试完整考点.资料以及我的系列文章. ...

  6. OpenOCD安装与使用(JTAG调试)

    本文介绍openocd开源软件的安装以及搭配JTAG对Xilinx u500VC707devkit的调试 PC OS: Ubuntu20.04 LTS Target ARCH: riscv64 JTA ...

  7. Head First 设计模式 —— 11. 组合 (Composite) 模式

    思考题 我们不仅仅要支持多个菜单,升值还要支持菜单中的菜单.你如何处理这个新的设计需求? P355 [提示]在我们的新设计中,真正需要以下三点: P354 我们需要某种属性结构,可以容纳菜单.子菜单和 ...

  8. maven 的安装与配置详细步骤

    1. 直接搜索maven 2. 进入后点击download界面,这时出现的是当前最新版本, 当然还有以前的版本可供下载 3. 下载解压到你指定的目录后,需要配置一下环境变量. a. 右键此电脑点击属性 ...

  9. requests +httprunne r

    1.get 请求和 post 请求的区别是什么?  2.requests 模拟 get 请求时,有哪两种方式让响应的结果不是乱码?(直接代码描述)  3.requests 库中的 post 方法,参数 ...

  10. 浅谈Go中的time.After

    go的一条哲学是 不要通过共享来实现通信,而是通信来实现共享 多协程之间通过 channel 来实现通信,而普遍会遇到的问题是,如何进行超时控制,资料一查询,需要配置select和time.After ...