首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

withRouter无法与redux - react redux反应路由器一起正常工作

withRouter是React Router库中的一个高阶组件,用于将路由信息注入到组件中。而react-redux是用于在React应用中集成Redux状态管理的库。由于withRouter和react-redux都会对组件进行包装,因此在某些情况下可能会出现冲突,导致withRouter无法与react-redux正常工作。

解决这个问题的方法是使用react-router-redux库,它提供了一个名为ConnectedRouter的组件,可以将路由信息与Redux状态管理结合起来。使用ConnectedRouter可以避免withRouter和react-redux之间的冲突。

ConnectedRouter的使用方法如下:

  1. 首先,安装react-router-redux库:
代码语言:txt
复制
npm install react-router-redux
  1. 在应用的根组件中,使用ConnectedRouter替代原来的Router组件:
代码语言:txt
复制
import { ConnectedRouter } from 'react-router-redux';
import { history } from './store'; // 导入Redux的history对象

const App = () => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      {/* 应用的其他组件 */}
    </ConnectedRouter>
  </Provider>
);
  1. 在Redux的store配置中,使用react-router-redux提供的syncHistoryWithStore函数来创建history对象:
代码语言:txt
复制
import { createStore, applyMiddleware } from 'redux';
import { createBrowserHistory } from 'history';
import { routerMiddleware, syncHistoryWithStore } from 'react-router-redux';
import rootReducer from './reducers';

const history = createBrowserHistory();
const middleware = routerMiddleware(history);
const store = createStore(rootReducer, applyMiddleware(middleware));

// 将history对象与store进行同步
syncHistoryWithStore(history, store);

export { history, store };

通过以上步骤,就可以在React应用中同时使用react-redux和React Router,并且解决withRouter无法与react-redux正常工作的问题。

关于腾讯云相关产品,推荐使用腾讯云的云服务器(CVM)来进行云计算和服务器运维。腾讯云的云服务器提供了高性能、可靠稳定的云计算资源,适用于各种应用场景。您可以通过以下链接了解更多关于腾讯云云服务器的信息:

腾讯云云服务器产品介绍:https://cloud.tencent.com/product/cvm

希望以上信息能对您有所帮助!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

应用connected-react-router和redux-thunk打通react路由孤立

应用即可将 redux react 应用整合在一起。...reduxreact-router React Router Redux 一起使用时大部分情况下都是正常的,但是偶尔会出现路由更新但是子路由或活动导航链接没有更新。...(Component)) React Router 将 redux react-router 深度整合 有时候我们可能希望将 redux react router 进行更深度的整合,实现: 将...routerMiddleware(history))) ); 关于怎么使用体系结构的扩展,请参考以下集合链接和博客文章 结尾 Store 跟 Router 必須使用同一个 history 物件,否則会有其中一方不能正常工作...的路由拆分按需加载 React Router 4 简介及其背后的路由哲学 异步 Action redux 中间件之 redux-thunk Redux 入门教程(二):中间件异步操作 https:

2.4K00
  • 超性感的React Hooks(一):为何她独具魅力

    我找了一篇很久以前的文章,记录了自己初学React时的感受。 当时觉得React学习难,一度认为自己无法掌握好,所以还在写文章劝大家学习angular[1]。现在想想真的有点点搞笑。...; 优秀的解决方案都在社区,许多人用React很长一段时间都无法知晓 React本身其实非常简单,可是围绕React的一系列解决方案,却没有途径告知大家。...但是以前函数组件无法维护自己的状态,因此在很多时候不得不选择class来实现目的。 React Hooks 让函数组件维护内部状态成为了可能。...在我看来,React Hooks,是能够最快实现心中所想的开发方式。 四、Typescript结合更简单 我们几乎不用关注React hooks组件typescript如何结合使用。...群里的许多朋友在学习typescript时,常常会非常困惑,如何将typescript应用React中?这样的问题在高阶组件时疑惑可能更大。相信吃过这个苦的同学都深有体会。

    1.1K20

    关于各方面 杂七杂八的一些内容

    >,它会在当前 URL 匹配时为其呈现元素添加样式属性 import { NavLink } from 'react-router-dom'; <NavLink to="/about" activeClassName...id=33#toc26 7.Switch:用于渲染路径匹配的第一个子 或 。...(2).withRouter是专门用来处理数据更新问题的.在使用一些redux的的connect()或者mobx的inject(), 如果依赖于路由的更新要重新渲染,会出现路由更新了但是组件没有重新渲染的情况...在使用withRouter解决更新问题的时候,一定要保证withRouter在最外层,比如 withRouter(connect(Component)) 文档:https://www.jianshu.com...={() => } 3.改用render避免重复创建匿名组件render={() => } render形式主要是为了向路由组件里传递参数,component形式无法传递参数.

    2K10

    【19】进大厂必须掌握的面试题-50个React面试

    为了方便您访问,我对React面试问题进行了归类: React一般面试问题 反应组件面试问题 React Redux面试问题 React Router面试问题 一般React –...9.ES5相比,React的ES6语法有何不同? 语法在以下方面从ES5更改为ES6: 10. ReactAngular有何不同?...React中有什么事件? 在React中,事件是对特定动作(如鼠标悬停,鼠标单击,按键等)的触发反应。处理这些事件类似于处理DOM元素中的事件。...减速器通过采用先前的状态和操作来工作,然后返回新的状态。它根据操作的类型确定需要执行哪种更新,然后返回新值。如果不需要完成任何工作,它将按原样返回以前的状态。 43.在Redux中存储的意义是什么?...48.为什么我们在React中需要一个Router? 路由器用于定义多个路由,并且当用户键入特定的URL时,如果此URL路由器内部定义的任何“路由”的路径匹配,则用户将被重定向到该特定的路由。

    11.2K30

    从零开始react实战:云书签-1 react环境搭建

    primary-color": "#1DA57A" } }) ); 使用 css-module 要使用 css-module 需要将 css 文件命名为fileName.module.less,然后就能在组件中引入并正常使用了...目录解释: assets: 存放图标,小图片等资源文件 components:存放公共组件 layout: 存放样式组件,用于嵌套路由和子路由中复用代码 pages: 存放页面组件 redux:存放 redux...配置 redux redux 算是 react 的一大难点。这里我们可以把 redux 理解成一个内存数据库,用一个对象来存储所有的数据..../index.module.less"; import { connect } from "react-redux"; import { changeLoginInfo, DATA_NAME } from...如果还有 withRouter,应将 withRouter 放在最外层。 目前登录访问的接口为 yapi 的 mock 数据,真正的后台代码将会在后面编写。

    3.5K30

    React】归纳篇(十)组件间通信方式之Redux | UI组件AntDesign | Redux-react

    函数 3、使用 先安装 npm install --save react-router-dom //web版本 路由组件view非路由组件components 使用路由组件的时候: 链接换成导航路由链接...JS库,不是React插件库 它可以用在react,angular,vue等项目中,但基本react配合使用 作用:集中式管理react应用中多个组件共享的状态。...联系在一起的对象 如何得到此对象?...react-redux 1、一个react插件库 2、专门用于简化react应用中使用redux 使用redux先写好结构: 在src中新建redux和containers文件夹 在redux文件夹下写好如下文件名..., composeWidthDevTools(applyMiddleware(thunk)) ) ReduxReact-Redux还是比较复杂,还是要多看文档练习,掌握其中的套路。

    24730

    react全家桶包括哪些_react 自定义组件

    > 向外暴露 withRouter 包装产生的组件(跟 connect 类似),让非路由组件可以访问到路由组件的 API,内部向组件传递路由组件特有的属性:history/location/match...} = this.props.location return ( { pathname } ) } } export default withRouter...并且按照严格的顺序来执行,所以不需要担心race condition(竟态)的问题 4.2.3 reducer 加工 state,返回新的 state 通过reducer将 旧state和 actions联系在一起...简化使用 redux 用来简化 react 应用中使用 redux 的一个插件 4.4.1 组件两大类 UI 组件 a....install -D babel-plugin-styled-components 5.5 路由的嵌套及传参 路由的嵌套(子路由): 文件夹的嵌套,最后就可以形成子路由 路由的传参: Next.js中无法通过

    5.8K20

    React教程(详细版)

    特点 采用组件化模式,声明式编码,提高开发效率和组件复用性 在React Native中可以用react预发进行安卓、ios移动端开发 使用虚拟dom和有些的diffing算法,尽量减少真实dom的交互...它是专门做状态管理的js库,不是react插件库 它可以用在angular、vue、react等项目中,但react配合用到最多 作用:集中式管理react应用中多个组件共享的状态 10.1.2 什么情况下需要使用它...某个组件的状态需要让其他组件也能拿到 一个组件需要改变另一个组件的状态(通信) 总体原则:能不用就不用,如果不用比较吃力,就可以使用 redux工作流程 11、react-redux 原先redux...是独立公司创建的,后来react公司发现开发者都这么喜欢在react项目中使用redux,所以就自己开发了一个react的插件叫react-redux 11.1、react-redux模型图 11.2...还能正常+1吗? 答案:是可以正常+1,为什么呢?

    1.7K20
    领券