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 变成了什么?的更多相关文章

  1. react项目开发中遇到的问题

    前言 作为一个前端爱好者来说,都想在react上一试生手,那么在搭建react项目开发时,肯定会有这样或者那样的问题,尤其是对初学者来说,下面就个人在开发过程中遇到的问题总结一下,好在有google帮 ...

  2. immutable.js 在React、Redux中的实践以及常用API简介

    immutable.js 在React.Redux中的实践以及常用API简介 学习下 这个immutable Data 是什么鬼,有什么优点,好处等等 mark :  https://yq.aliyu ...

  3. react + antiDesign开发中遇到的问题记录

    react + antiDesign开发中遇到的问题记录 一:页面中子路由失效: antiDesign的官方实例中,会把路由重复的地方给去重,而且路由匹配模式不是严格模式.所以我们需要在util.js ...

  4. Immutable.js 以及在 react+redux 项目中的实践

    来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...

  5. React Native工程中TSLint静态检查工具的探索之路

    建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查代码, ...

  6. React Native开发中自动打包脚本

    React Native开发中自动打包脚本 在日常的RN开发中,我们避免不了需要将我们编写的代码编译成安装包,然后生成二维码,供需要测试的人员扫描下载.但是对于非原生的开发人员来说,可能不知如何使用X ...

  7. React 源码中的依赖注入方法

    一.前言 依赖注入(Dependency Injection)这个概念的兴起已经有很长时间了,把这个概念融入到框架中达到出神入化境地的,非Spring莫属.然而在前端领域,似乎很少会提到这个概念,难道 ...

  8. React和Vue中,是如何监听变量变化的

    React 中事件监听 本地调试React代码的方法 先将React代码下载到本地,进入项目文件夹后yarn build 利用create-react-app创建一个自己的项目 把react源码和自己 ...

  9. 在React旧项目中安装并使用TypeScript的实践

    前言 本篇文章默认您大概了解什么是TypeScript,主要讲解如何在React旧项目中安装并使用TypeScript. 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多,但都是一些语 ...

随机推荐

  1. Echarts数据可视化全解注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  2. cocos2dx - 生成怪物及AI

    接上一节内容:cocos2dx - tmx地图分层移动处理 本节怪物及简单AI实现 一.怪物 同cocos2dx - v2.3.3编辑器骨骼动画 里创建的CPlalyer一样,新建一个CMonster ...

  3. Java简单知识梳理

    1. Java是单根继承结构:每个类都继承于Object类 ,这也就保证了每个对象都具备某些功能 2. Java类权限关键字: public -> protected -> default ...

  4. kubeernetes节点资源限制

    实际应用中发现,部分节点性能不足,某些较大的服务如果跑在这些机器上.会很快消耗该机器的内存和cpu资源,如果用uptime看一下的就会发现负载特别高(合理的范围这个值应该等于cpu个数),高到一定值就 ...

  5. Cygwin - windows系统下运行linux操作 --代替linux虚拟机安装、双系统的繁琐

    我把Cygwin视为Windows用户熟练linxu系统操作的良好途径.它不需要虚拟机.双系统等安装对电脑知识.硬件的要求,只需要基本的软件安装操作即可.以下是安装步骤供小白同胞参考. Cygwin安 ...

  6. Struts2 06--系统拦截器防止数据重复提交

    一.拦截器简要概述 拦截器,在AOP(Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加入某些操作.拦截是AOP的一种实现策略. 在W ...

  7. VIM文本替换命令

    在VIM中进行文本替换:       1.  替换当前行中的内容:    :s/from/to/    (s即substitude)         :s/from/to/     :  将当前行中的 ...

  8. AOP的实现的几种方式

    1.静态代理,实现代码如下,实际上是对装饰器模式的一种应用 interface UserManager { public void addUser(); } class UserManagerImpl ...

  9. Java基础总结--变量、运算符总结

    ---变量基本概述----变量作用:就是用来存储数据变量的声明:变量类型 变量名;变量类型---区分不同类型的数据,变量名--按名访问变量变量名(规则):见名识意,第一个字母小写后面驼峰规则变量的作用 ...

  10. MySQL常用存储引擎

    MySQL存储引擎主要有两大类: 1. 事务安全表:InnoDB.BDB. 2. 非事务安全表:MyISAM.MEMORY.MERGE.EXAMPLE.NDB Cluster.ARCHIVE.CSV. ...