关于react-router/react-router-dom v4 history不能访问问题的解决

前言

最近把react-router 升级了一下， 在使用react-router-dom 是，子组件使用this.props.history  找不到了，看看官方文档，找了半天也没找到，因为我是在异步执行完后才跳转页面，需要用到push 或者replace，怎么办啊，国内知识都是你复制我的，我复制你的，都特么垃圾。只能去Google，

最终找到了答案：（看代码一目了然）

解决方法

首先使用router

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { Provider } from 'mobx-react';
import stores from '../store/index';
import Bundle from '../components/bundle';
import Hello from 'bundle-loader?lazy!../components/hello.jsx';
// 这是按需加载，对于现在讨论的问题没有影响
const HelloAPP = () => (
 <Bundle load={Hello}>
  {(Hello) => <Hello />}
 </Bundle>
);
export default class App extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
  <Provider { ...stores }>
  <BrowserRouter basename="/">
   <Route path="/" component={HelloAPP}/>
  </BrowserRouter>
  </Provider>
 );
 };
}

接着是子组件的使用history

import React, { Component } from 'react';
// 需要这步，你要npm 这个，
import PropTypes from 'prop-types';
export default class Hello extends Component {
 constructor(props) {
 super(props);
 }
 // 这一步是重点
 static contextTypes = {
 router: PropTypes.object.isRequired
 };
 test = () => {
 console.log(this.context);
 setTimeout(() => {
  this.context.router.history.push("/otherPath");
 }, 1000);
 };
 render() {
 return (
  <div>
  <button onClick={this.test}>按钮</button>
  </div>
 );
 };
}

让我们看看this.context :

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • react-router browserHistory刷新页面404问题解决方法

    react-router browserHistory刷新页面404问题解决方法

    使用React开发新项目时,遇见了刷新页面,直接访问二级或三级路由时,访问失败,出现404或资源加载异常的情况,本篇针对此问题进行分析并总结解决方案. 背景 使用webpack-dev-server做本地开发服务器时,正常情况只需要简单使用webpack-dev-server指令启动即可,但是当项目处于以下两种情况时,往往需要有嵌套路由和异步加载路由: 我们使用react-router这种路由库构建单页面应用路由: 使用html-webpack-plugin插件动态将加载js的<script>

  • 关于react-router/react-router-dom v4 history不能访问问题的解决

    关于react-router/react-router-dom v4 history不能访问问题的解决

    前言 最近把react-router 升级了一下, 在使用react-router-dom 是,子组件使用this.props.history  找不到了,看看官方文档,找了半天也没找到,因为我是在异步执行完后才跳转页面,需要用到push 或者replace,怎么办啊,国内知识都是你复制我的,我复制你的,都特么垃圾.只能去Google, 最终找到了答案:(看代码一目了然) 解决方法 首先使用router import React, { Component } from 'react'; impo

  • react中的虚拟dom和diff算法详解

    虚拟DOM的作用 首先我们要知道虚拟dom的出现是为了解决什么问题的,他解决我们平时频繁的直接操作DOM效率低下的问题.那么为什么我们直接操作DOM效率会低下呢? 比如我们创建一个div,我们可以在控制台查看一下这个div上自带或者继承了很多属性,尤其是我们使用js操作DOM的时候,我们的DOM本身就很复杂,js的操作也会占用很多时间,但是我们控制不了DOM元素本身,因此虚拟DOM解决的是js操作DOM这一层面,其实解决的是减少了操作dom的次数 简单实现虚拟DOM 虚拟DOM,见名知意,就是假

  • 详解react应用中的DOM DIFF算法

    详解react应用中的DOM DIFF算法

    前言 对我们搞前端的来说,目前最流行的两大前端框架毫无疑问当属React和Vue,对于这两大框架,想必大家也是再熟悉不过了.然而,这两大框架无一例外的全部放弃使用传统的DOM技术,却采用了以JS为基础的Virtual DOM技术,也可称作虚拟DOM.所以,到底什么是Virtual DOM?两大热门框架全部使用Virtual DOM的原因又是什么?接下来让我这个搞前端的人来好好地为您讲解一下DOM DIFF算法的牛逼之处. 什么是Virtual DOM? 如字面意思所说,Virtual DOM即

  • Vue Router路由hash模式与history模式详细介绍

    Vue Router路由hash模式与history模式详细介绍

    目录 一.前言 二.hash模式 三.history模式 一.前言 对于hash模式和history模式,最直接的区别就是地址栏带不带"#"号了. vue脚手架搭建的项目的路由默认是hash模式. hash模式: 创建路由实例时,添加mode:"history"属性,即可使用history模式. const router = new VueRouter({ routes, mode: "history" }) history模式: 二.hash模

  • React使用refs操作DOM方法详解

    React使用refs操作DOM方法详解

    在react框架 甚至说是三大框架中都是不太支持大家直接去操作dom的 因为也没什么必要 当然也会有特殊情况 例如视频播放 强制动画 第三方插件的一些渲染或初始化 官方也给了我们对应的解决办法 那就是refs 我们来简单写一个 我们先在constructor中定义一个虚拟dom的控制 参考代码如下 constructor(props){ super(props); this.divDaimin = React.createRef() this.state = { } } 这里 我们就通过Reac

  • react路由v6版本NavLink的两个小坑及解决

    目录 react路由v6版本NavLink的两个小坑 react 路由React Router(v6) 安装react-router 一级路由 重定向 NavLink高亮 useRoutes路由表----嵌套路由 路由的params参数 路由的search参数 路由的state参数 编程式路由导航 react路由v6版本NavLink的两个小坑 本人新人,是按照文档进行学习的,今遇到两个小坑,现记录如下: 第一点,当前版本的NavLink的style或者className当中的isActive,

  • vue router总结 $router和$route及router与 router与route区别

    vue router总结 $router和$route及router与 router与route区别 1 this.$router和this.$route的区别 vue router this.$router是VueRouter的实例方法,当导航到不同url,可以使用this.$router.push方法,这个方法则会向history里面添加一条记录,当点击浏览器回退按钮或者this.$router.back()就会回退之前的url. this.$route相当于当前激活的路由对象,包含当前ur

  • React报错之组件不能作为JSX组件使用的解决方法

    目录 总览 返回单个JSX元素 不要忘记返回值 更新React类型声明 总览 组件不能作为JSX组件使用,出现该错误有多个原因: 返回JSX元素数组,而不是单个元素. 从组件中返回JSX元素或者null以外的任何值. 使用过时的React类型声明. 返回单个JSX元素 下面是一个错误如何发生的示例. // App.tsx // ️ 'App' cannot be used as a JSX component. // Its return type 'Element[]' is not a va

  • 初识React及React开发依赖详解

    初识React及React开发依赖详解

    目录 初识React React介绍 React特点 React的依赖介绍 React的开发依赖 Babel和React的关系 React的依赖引入 初识React React介绍 React是什么呢? 相信每个做开发的人对它都或多或少有一些印象; 这里我们来看一下官方对它的解释:用于构建用户界面的 JavaScript 库; 目前对于前端开发来说,几乎很少直接使用原生的JavaScript来开发应用程序,而是选择一个JavaScript库(框架). 在过去的很长时间内,jQuery是被使用最多

  • 浅谈React的React.FC与React.Component的使用

    目录 一.React.FC<> 二.class xx extends React.Component React 的组件可以定义为 函数(React.FC<>)或class(继承 React.Component) 的形式. 一.React.FC<> 1.React.FC是函数式组件,是在TypeScript使用的一个泛型,FC就是FunctionComponent的缩写,事实上React.FC可以写成React.FunctionComponent: const App:

随机推荐