react-router-dom和router区别

时间: 2023-09-27 13:07:46 浏览: 144

关于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 是 React 应用程序中的路由库，它允许你在不刷新页面的情况下动态地渲染组件。 React Router 库包含了多个组件，其中包括 Router、Route、Switch 和 Redirect 等。而 react-router-dom 是基于 React Router 的 Web 版本，它提供了一些额外的组件，比如 Link 和 NavLink，用于在应用中进行导航。 react-router-dom 还提供了一些针对 Web 平台的特性，比如 BrowserRouter 和 HashRouter 等。因此，React Router 是 React 应用程序中的路由库，而 react-router-dom 则是基于 React Router 的 Web 版本，提供了一些额外的组件和 Web 平台特性。

阅读全文

react-router-dom和router区别

相关推荐

react-router:react-router 中文文档

koa-react-router：用于koa 2的react-router中间件

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

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

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

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

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

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

react-router-dom react-router-config 安装失败

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

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的类代码

react react-router-dom

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

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

最新推荐

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

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

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

【含数据库+附源码+说明文档】基于Java swing和mysql实现的银行管理系统（彩色版本）

Aspose资源包：转PDF无水印学习工具

管理建模和仿真的文件

【R语言高性能计算秘诀】：代码优化，提升分析效率的专家级方法

在构建视频会议系统时，如何通过H.323协议实现音视频流的高效传输，并确保通信的稳定性？

Go语言控制台输入输出操作教程

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

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

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