react-router 3 中的 useRouterHistory(createHistory) 到了 react-router 4 变成了什么?
react-router 3 文档: https://github.com/ReactTraining/react-router/blob/v3/docs/API.md
react-router 4 文档: https://reacttraining.com/react-router
1. react-router 3 中的 useRouterHistory(createHistory) :
依赖: react-router,redux-simple-router
作用:useRouterHistory is a history enhancer that configures a given createHistory factory to work with React Router.
This allows using custom histories in addition to the bundled singleton histories.
It also pre-enhances the history with the useQueries and useBasename enhancers from history.
useRouterHistory是一个history增强器,它将给定的createHistory工厂配置为使用React Router。
这允许使用除了捆绑的单例(单例模式:一个类只能有一个实例存在,并且只返回一个对象)历史之外的自定义历史。
它还通过历史记录中的useQueries和useBasename增强器预先增强了历史history
用法:src => store => index.js
import createHistory from 'history/lib/createHashHistory'
import {useRouterHistory} from 'react-router'
import {syncHistory} from 'redux-simple-router'
export const history = useRouterHistory(createHistory)({queryKey: false});
export const reduxRouterMiddleware = syncHistory(history);
export default function configureStore(preLoadedState) {
return createStore(
rootReducer,
preLoadedState,
applyMiddleware(..., reduxRouterMiddleware, ...)
)
}
src => main.js
import configureStore, {history, reduxRouterMiddleware} from './store'
import App from './containers/App.js'
export const store = configureStore()
reduxRouterMiddleware.listenForReplays(store)
ReactDom.render(
<Provider store={store}>
<Router>
<Route path="/" component={App}/>
</Router>
</Provider>,
document.getElementById('root')
)
2. react-router 4 中的 useRouterHistory(createHistory) 变成了什么 :
react-router 4 中没有 useRouterHistory(createHistory) 这种写法了,取而代之的是 BrowserRouter。
依赖: react-router (通用库,web 和 Native 都可用),react-router-dom (web用)
用法:src => store => index.js
export default function configureStore(preLoadedState) {
return createStore(
rootReducer,
preLoadedState,
applyMiddleware(..., ...)
)
}
src => main.js
import {BrowserRouter as Router, Route} from 'react-router-dom'
import configureStore from './store'
import App from './containers/App.js'
export const store = configureStore()
ReactDom.render(
<Provider store={store}>
<Router>
<Route path="/" component={App}/>
</Router>
</Provider>,
document.getElementById('root')
)
react-router 3 中的 useRouterHistory(createHistory) 到了 react-router 4 变成了什么?的更多相关文章
- react项目开发中遇到的问题
前言 作为一个前端爱好者来说,都想在react上一试生手,那么在搭建react项目开发时,肯定会有这样或者那样的问题,尤其是对初学者来说,下面就个人在开发过程中遇到的问题总结一下,好在有google帮 ...
- immutable.js 在React、Redux中的实践以及常用API简介
immutable.js 在React.Redux中的实践以及常用API简介 学习下 这个immutable Data 是什么鬼,有什么优点,好处等等 mark : https://yq.aliyu ...
- react + antiDesign开发中遇到的问题记录
react + antiDesign开发中遇到的问题记录 一:页面中子路由失效: antiDesign的官方实例中,会把路由重复的地方给去重,而且路由匹配模式不是严格模式.所以我们需要在util.js ...
- Immutable.js 以及在 react+redux 项目中的实践
来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...
- React Native工程中TSLint静态检查工具的探索之路
建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查代码, ...
- React Native开发中自动打包脚本
React Native开发中自动打包脚本 在日常的RN开发中,我们避免不了需要将我们编写的代码编译成安装包,然后生成二维码,供需要测试的人员扫描下载.但是对于非原生的开发人员来说,可能不知如何使用X ...
- React 源码中的依赖注入方法
一.前言 依赖注入(Dependency Injection)这个概念的兴起已经有很长时间了,把这个概念融入到框架中达到出神入化境地的,非Spring莫属.然而在前端领域,似乎很少会提到这个概念,难道 ...
- React和Vue中,是如何监听变量变化的
React 中事件监听 本地调试React代码的方法 先将React代码下载到本地,进入项目文件夹后yarn build 利用create-react-app创建一个自己的项目 把react源码和自己 ...
- 在React旧项目中安装并使用TypeScript的实践
前言 本篇文章默认您大概了解什么是TypeScript,主要讲解如何在React旧项目中安装并使用TypeScript. 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多,但都是一些语 ...
随机推荐
- JVM性能调优,GC
刚刚做完了一个项目的性能测试,“有幸”也遇到了内存泄露的案例,所以在此和大家分享一下. 主要从以下几部分来说明,关于内存和内存泄露.溢出的概念,区分内存泄露和内存溢出:内存的区域划分,了解GC回收机制 ...
- spring boot / cloud (十九) 并发消费消息,如何保证入库的数据是最新的?
spring boot / cloud (十九) 并发消费消息,如何保证入库的数据是最新的? 消息中间件在解决异步处理,模块间解耦和,和高流量场景的削峰,等情况下有着很广泛的应用 . 本文将跟大家一起 ...
- 容斥原理、欧拉函数、phi
容斥原理: 直接摘用百度词条: 也可表示为 设S为有限集, ,则 两个集合的容斥关系公式:A∪B = A+B - A∩B (∩:重合的部分) 三个集合的容斥关系公式:A∪B∪C = A+B+C - A ...
- JQuery-基础学习1
1)JQuery语法 jquery语法是为HTML元素的选取编制,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义JQuery 选择符(selector)& ...
- python日记
今天学习了Python的一些基本知识,就是简单的输入输出.因为我安装的Python环境是3.6版本的,因此我说的自己体会到的问题都是基于这个版本而得出的问题,说一下今天感觉要注意的要点吧. 1.首先是 ...
- 单源最短路径问题-Dijkstra算法
同样是层序遍历,在每次迭代中挑出最小的设置为已知 ===================================== 2017年9月18日10:00:03 dijkstra并不是完全的层序遍历 ...
- Yii2之类自动加载
在yii中,程序中需要使用到的类无需事先加载其类文件,在使用的时候才自动定位类文件位置并加载之,这么高效的运行方式得益于yii的类自动加载机制. Yii的类自动加载实际上使用的是PHP的类自动加载,所 ...
- N厂水鬼烂大街?那来看ZF厂V4帝舵小红花
自从帝舵小红花推上市面之后,各大工厂都在推出新版本,但做得最成熟的还是ZF厂,帝舵这个品牌是非常低调的,很少有人关注,但是ZF厂在这款腕表也是下了不少功夫,曾经帝舵小红花和N厂水鬼并列为最顶级的表畅销 ...
- php语法标记风格
1.xml风格(标准风格推荐使用) 复制代码 代码如下: <?php echo"这是xml风格的标记"; ?> xml风格的标记是常用的标记,也是推荐使用的标记,服务器 ...
- hibernate的session详解