react-router-dom 最新版本

时间: 2023-08-27 14:07:15 浏览: 102

关于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-d 在React应用中，React Router是一个强大的路由库，用于管理页面间的导航。在本文中，我们将深入探讨一个关于`react-router-dom` v4版本中的`history`对象无法访问的问题及其解决方案。在升级到`react-router-dom` v4后，开发者可能会遇到在子组件中通过`this.props.history`无法获取到`history`对象的情况。这是因为v4版本引入了一些变化，特别是对于如何在组件中使用`history`进行了调整。传统上，`history`对象可以通过props传递给组件，但在新版本中，这种方式不再适用。为了解决这个问题，我们可以按照以下步骤操作： 1. **使用`BrowserRouter`**：确保在最外层应用组件中使用`BrowserRouter`。`BrowserRouter`会将`history`对象注入到其内部的`Route`组件，并通过`context`向下传递。这样，即使在子组件中，我们也能通过`context`访问到`history`。 ```jsx import React, { Component } from 'react'; import { BrowserRouter, Route } from 'react-router-dom'; export default class App extends Component { render() { return ( <BrowserRouter basename="/"> <Route path="/" component={HelloAPP} /> </BrowserRouter> ); } } ``` 2. **设置`contextTypes`**：然后，在需要使用`history`的子组件中，我们需要声明`contextTypes`来声明`router`对象。这使得组件能够访问到由`BrowserRouter`提供的`context`。 ```jsx import React, { Component } from 'react'; import PropTypes from 'prop-types'; // 需要引入PropTypes库 export default class Hello extends Component { static contextTypes = { router: PropTypes.object.isRequired, // 声明contextTypes，定义router属性 }; test = () => { console.log(this.context); setTimeout(() => { this.context.router.history.push("/otherPath"); }, 1000); }; render() { return ( <div> <button onClick={this.test}>按钮</button> </div> ); } } ``` 通过上述方式，我们可以在异步操作完成后，使用`this.context.router.history.push`或`this.context.router.history.replace`来进行页面跳转。这种方法解决了在子组件中无法直接通过`props`访问`history`的问题。总结一下，`react-router-dom` v4版本中，要访问`history`对象，需要在应用中使用`BrowserRouter`作为顶级容器，并在子组件中声明`contextTypes`以接收`router`对象。这样，我们就可以在任何组件中实现动态的页面导航，而不仅仅是那些通过`Route`组件直接接收`props`的组件。请注意，`context`的使用虽然方便，但应谨慎处理，因为过度依赖`context`可能导致组件之间的耦合度过高，不易维护。在React社区，通常建议优先考虑使用props和state进行数据传递。然而，对于特定的场景，如路由跳转，`context`提供了一个方便的解决方案。

当前最新版本的 react-router-dom 是 v5.3.0。你可以通过以下命令安装： ``` npm install react-router-dom@5.3.0 ``` 或者，如果你使用的是 yarn： ``` yarn add react-router-dom@5.3.0 ``` 注意，安装前请确保你已经安装了 React。

阅读全文

react-router-dom 最新版本

相关推荐

react-router:react-router 中文文档

react-router-dom-demo

react-router-dom:react-router-dom原始码

react-router-dom1:react-router-dom官方示例，基本使用

react-router:react-router-dom的实现

react-router-dom5和react-router-dom6的区别

react 最新版本 匹配的 react-dom react-router-dom 版本

react-router-example:具有react-router-dom的React Router示例

learn:关于React-router和React-router-dom的完整描述

electron-webpack-react-router-dom-hooks-broken:这个简单的示例演示了在电子Webpack设置的上下文中使用react-router-dom钩子导致的钩子规则错误

express-react-router-views:具有react react-dom和react-router的同构渲染

m3-react-router-dom:React Router DOM的类代码

Sanctuary-Glamping-Frontend：该项目使用ant desing，axios，bootstrap，react-dom，react，react-file-base64， react-redux，react -router-dom，react-thunk，redux

开始开发：1.react 2.react-dom 3.babel 4.webpack 5.prop类型6.redux 7.react-redux 8.react-router-dom 9.react-transition-group 10 .bootstrap 11.react-bootstrap 12.axios

react 最新版本 匹配的 react-dom react-router-dom

react 18.xx最新版本 匹配的 react-dom react-router-dom

react-dom 需要与react-router-dom 版本对应

引入import { useHistory } from "react-router-dom";为什么会报错模块“"react-router-dom"”没有导出的成员“useHistory”

最新推荐

react-router-dom 嵌套路由的实现

使用React-Router实现前端路由鉴权的示例代码

react-router实现跳转传值的方法示例

黑板风格计算机毕业答辩PPT模板下载

管理建模和仿真的文件

提升点阵式液晶显示屏效率技术

在SoC芯片的射频测试中，ATE设备通常如何执行系统级测试以保证芯片量产的质量和性能一致？

CodeSandbox实现ListView快速创建指南

"互动学习：行动中的多样性与论文攻读经历"

点阵式显示屏常见故障诊断方法

react 最新版本匹配的 react-dom react-router-dom 版本

react 最新版本匹配的 react-dom react-router-dom

react 18.xx最新版本匹配的 react-dom react-router-dom