最近在开发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. 什么情况下调用doGet()和doPost()?

    默认情况是调用doGet()方法,JSP页面中的Form表单的method属性设置为post的时候,调用的为doPost()方法: 为get的时候,调用deGet()方法.

  2. Java学习日报7.13

    /** * *//** * @author 86152 * */package Employee;import java.util.Scanner;public class Employee{ pri ...

  3. OpenSUSE 使用基础

    OpenSUSE OpenSUSE 是一个基于 RPM 的发行版,这和 RHEL/CentOS 一致. 但是它的官方包管理器是专有的 zypper,挺好用的,软件也很新. 本文以 OpenSUSE L ...

  4. Hbase相关参数详解

    转载:http://www.cnblogs.com/nexiyi/p/hbase_config_94.html 版本:0.94-cdh4.2.1 hbase-site.xml配置 hbase.tmp. ...

  5. 聊聊并发,进程通信方式,go协程简单应用场景

    开篇提问 知道并发,并行,线程,协程概念吗?或者知道大概含义吗? 有线程为什么还要有协程?区别是什么? 『进程』通信方式知道几种?有没有超过3种? golang『协程』通信方式推荐? 使用并发的目的是 ...

  6. 避坑 | Java8使用并行流(ParallelStream)注意事项

    示例分析 /** * 避坑 | Java8使用并行流(ParallelStream)注意事项 * * @author WH.L * @date 2020/12/26 17:14 */ public c ...

  7. day121:MoFang:植物的状态改动(幼苗→成长期)&植物的浇水功能

    目录 1.当果树种植以后在celery的异步任务中调整浇水的状态 2.客户端通过倒计时判断时间,显示浇水道具 3.客户端判断当前种植物状态控制图标的显示和隐藏 4.当用户单击浇水图标, 则根据当前果树 ...

  8. Navcat连接Mysql报错1521

    原因是新版的MySql密码加密算法改变,导致旧版本的Navcat连接报错. 解决方案: 1.升级Navcat 因为只是本地的Mysql,所以没验证这个方法,网传可以,此处不介绍. 2.修改Mysql加 ...

  9. MalformedByteSequenceException: 1字节的 UTF-8 序列的字节 1 无效

    记住,每次修改了配置之后都 clean 一下,把 target 删除 第一种解决方案 去掉 pom.xml 中的 properties <properties> <maven.com ...

  10. Netty学习:伪共享

    目录 Netty中的伪共享 伪共享的原理以及介绍 Netty中的伪共享 先说为什么知道这个概念吧,期初看Netty源码的时候,看到了NioEventLoop的构建,其中有这么一句代码: private ...