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这块的讲解虽然很多,但都是一些语 ...
随机推荐
- 前端要革命?看我在js里写SQL
在日新月异的前端领域中,前端工程师能做的事情越来越多,自从nodejs出现后,前端越来越有革了传统后端命的趋势,本文就再补一刀,详细解读如何在js代码中执行标准的SQL语句 为什么要在js里写SQL? ...
- git的使用(进阶篇)
如何处理代码冲突 冲突合并一般是因为自己的本地做的提交和服务器上的提交有差异,并且这些差异中的文件改动,Git不能自动合并,那么就需要用户手动进行合并 如我这边执行git pull origin ma ...
- exp3.1实现顺序栈的各种操作
#include<iostream>using namespace std;#include<malloc.h>typedef char Elem;typedef struct ...
- ASP.NET Core 认证与授权[3]:OAuth & OpenID Connect认证
在上一章中,我们了解到,Cookie认证是一种本地认证方式,通常认证与授权都在同一个服务中,也可以使用Cookie共享的方式分开部署,但局限性较大,而如今随着微服务的流行,更加偏向于将以前的单体应用拆 ...
- linux 计划任务(crontab)
每天写一点,总有一天我这条咸鱼能变得更咸 cron服务是一个linux下 的定时执行工具,可以在无需人工干预的情况下运行作业.频率可以划分为 分钟 小时 天 月 周,格式如下: 1.crontab 服 ...
- Ajax笔记 XHR XMLHttpRequest
XMLHttpRequest xhr XmlHttpRequest var request ; if(Windows.XMLHttpRequest) { request ...
- Vue directive 回调运用
Vue的官方自定义directive,基本调用简洁如下: Vue.directive('my-directive', { bind: function () {},// 指令与被绑定元素第一次绑定时触 ...
- 【转】C缺陷和陷阱学习笔记
http://www.cnblogs.com/hbiner/p/3591335.html?utm_source=tuicool&utm_medium=referral 这段时间把<C陷阱 ...
- python异步并发模块concurrent.futures入门详解
concurrent.futures是一个非常简单易用的库,主要用来实现多线程和多进程的异步并发. 本文主要对concurrent.futures库相关模块进行详解,并分别提供了详细的示例demo. ...
- Nodejs.安装.非源码方式安装Node.js (Centos)
已验证的适用环境: Centos6.x 树莓派官方ROM(Raspbian) 先去官网下载已编译好的安装包 https://nodejs.org/en/download/current/ 以Cent ...