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这块的讲解虽然很多,但都是一些语 ...
随机推荐
- webpack-dev-server配置指南(使用webpack3.0)
最近正在研究webpack,听说webpack可以自己搭建一个小型的服务器(使用过vue-cli的朋友应该都见识到过),所以迫不及待的想要尝试一下.不过,在实际操作中发现,用webpack搭建服务器仍 ...
- git的使用(入门篇)
1.Git 的安装 Window 下的安装 从 http://git-scm.com/download 上下载window版的客户端,然后一直下一步下一步安装git即可,请注意,如果你不熟悉每个选项的 ...
- Html 初识样式表&选择器
样式表&类选择器分类 样式表分类: 1.内联式样式表:在标签内部写样式代码,精确但不方便,增加工作量,后期修改麻烦. 2.嵌入式样式表:一般写在head内 以<style>.... ...
- 面试题:Two Sum
Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...
- ftpclient 550 permission denied
遇到一个坑,ftp服务器有主被动模式,如果ftpclient 没有设置模式,默认就是主动模式,如果ftp服务器是被动模式,那么使用ftpclient就执行上传和下载,就会失败, 添加ftpClient ...
- Debian 9 中手动设置有线网络
multi-user.target中不使用networkmanager,上网需要手动设置后才可以,进行有线网线的设置: 首先得到网卡名称:ip addr or ls /sys/class/net/,以 ...
- .xlsx文件总是默认用2007 Microsoft Office component 打开,且无法更改用EXCEL打开的解决方法
之前装了OFFICE2003,后来改装了 OFFICE2007,之后XLSX文件双击总是用2007 Microsoft Office component 打开,导致无法打开. 解决方法: 打开注册表R ...
- wsimport 命令不是内部命令
问题: 1. webservice在输入命令的时候wsimport的时候会出现如下错误: wsimport不是内部或者外部命令. 2. javac不是内部或者外部命令 3 java 就可以显示配置成功 ...
- sessionStorage,UserDataStorage,cookie全兼容写法存在的问题
最近央视播出了中国诗词大赛,看到了一首诗,送给大家 <春宵·春宵一刻值千金> 作者:苏轼 [宋代] 春宵一刻值千金,花有清香月有阴. 歌管楼台声细细,秋千院落夜沉沉. 好了,言归正传,今天 ...
- ajax跨域请求解决方案
大家好,今天我们学习了js的跨域请求的解决方案,由于JS中存在同源策略,当请求不同协议名,不同端口号.不同主机名下面的文件时,将会违背同源策略,无法请求成功!需要进行跨域处理! 方案一.后台PHP进行 ...