1.下载依赖 npm i react-router-redux --save 2.引用push import { push } from "react-router-redux"; 3.在action中使用
}, data2: [] }, }} > <Button> 点击跳转 </Button> </Link> 2、使用 react-router-redux 中的 push 进行页面跳转 react-router-redux 中包含以下几个函数,一般会结合redux使用: push – 跳转到指定路径 replace – 替换历史记录中的当前位置 go
dispatch action,可以使用 dispatch 带上路由信息作为 action 的负载将路由信息存到 store,同时要能将路由信息从 Redux store 里面同步获取出来 这些可以通过 react-router-redux 官方文档中提到的是 react-router-redux,并且它已经被整合到了 react-router v4 中,但是根据 react-router-redux 的文档,该仓库不再维护,推荐使用 connected-react-router 使用dispatch切换路由 完成以上配置后,就可以使用dispatch切换路由了: import { push } from 'react-router-redux' // Now you can dispatch
"react-hot-loader": "^4.0.0", "react-redux": "^5.0.7", "react-router-dom": "^4.3.1", "react-router-redux 使用更加强大,同时支持web,native更多参考这里 1.安装react-router-dom npm install react-router-dom --save 2.如果项目中用了redux,可以安装react-router-redux react-redux'; import createHistory from 'history/createHashHistory'; import { ConnectedRouter } from 'react-router-redux 路径需要引入router-reducer: 新建main.js: import { combineReducers } from 'redux'; import { routerReducer } from "react-router-redux routerMiddleware: import { createStore,applyMiddleware } from 'redux'; import { routerMiddleware } from "react-router-redux
Router 核心 react-router-dom 用于 DOM 绑定的 React Router react-router-native 用于 React Native 的 React Router react-router-redux
依赖关系 dva react react-dom dva-core redux redux-saga history react-redux react-router-redux 组合reducer) 接redux-saga(完成redux-saga的fork -> watcher -> worker,并做好错误捕获) 除了core里最重要的两部分外,dva还做了一些事情: 内置react-router-redux
彻底移除 react-router-redux (可以在 Preact 迁移的同时并行完成)。 将 react-redux 升级至 7.2.0 版本(可能还涉及升级 redux)。 另外,移除 react-router-redux 的工作量也不小,不过好在这几项任务还算相对独立、互不影响。
Router 核心 react-router-dom 用于 DOM 绑定的 React Router react-router-native 用于 React Native 的 React Router react-router-redux
lib/common.js", "react", "react-dom", "redux", "react-redux", "redux-thunk", "react-router", "react-router-redux entry:{ vendor: [ "react", "react-dom", "redux", "react-redux", "redux-thunk", "react-router", "react-router-redux
心急的朋友可以直接看代码:https://github.com/sorrycc/github-stars 一、URL > Data 需求 routing 选择 react-router + react-router-redux
AntDesign(蚂蚁金服的React UI库) redux-saga 管理异步逻辑 react-router、react-router-redux 管理应用路由 使用了 ES6 的 decorator
vendor: ['react', 'react-dom', 'redux', 'react-redux', 'react-router-dom', 'react-router-redux combineReducers, applyMiddleware, compose } from 'redux'; import { routerReducer, routerMiddleware } from 'react-router-redux
cerebral 路由 react-router react-router-component redux-router react-router-scroll universal-router rrtr react-router-redux
= [ 'react', 'react-dom', 'redux', 'redux-thunk', 'react-redux', 'react-router-dom', 'react-router-redux
15.2.1", "react-dom": "^15.2.1", "react-redux": "^5.0.5", "react-router-dom": "^4.1.2", "react-router-redux
BrowserRouter,Route,Switch}from'react-router-dom';import{Provider}from'react-redux';import{routerReducer}from'react-router-redux
routerRedux.push({ pathname: '/logout', query: { page: 2, }, }); 除 push(location) 外还有更多方法,详见 react-router-redux
createHistory from 'history/createMemoryHistory'; import { routerReducer, routerMiddleware } from 'react-router-redux
"react-router-config": "^1.0.0-beta.4", "react-router-dom": "^4.2.2", "react-router-redux
string" || Array.isArray(options)) { // 正常情况下, options 是 <Route> 的 props, 是个对象; 这里判断, 是为了兼容 `react-router-redux