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. python模拟登陆 pixiv

    ##---author:wuhao##在QQ群看到有群友在模拟登陆 pivix.cn 这个网站,闲来无事,我也写了一个测试一下,起初我把它想的复杂了,认为我需要获取服务器返回过来的Set-Cookie ...

  2. 【Spring】浅谈spring推荐构造器注入

    一.前言 ​ Spring框架对Java开发的重要性不言而喻,其核心特性就是IOC(Inversion of Control, 控制反转)和AOP,平时使用最多的就是其中的IOC,我们通过将组件交由S ...

  3. 在HBulider中如何快速的生成有序(ol)和无序(ul)列表

    首先你需要创建一个HTML文件,然后在body里面写入你要创建的类型(有序或者无序),然后列表的个数个人来定: 格式如下: ul > li * 5    代表我要创建一个列表为5个的无序类型 然 ...

  4. 怎么用SQL语句备份和恢复数据库?

    BACKUP DATABASE "mydb" TO DISK ='C:\mybak.db' with init RESTORE DATABASE "mydb" ...

  5. 见到过的MOS管的一些参数

    选择MOS管的时候需要注意的几个参数1,VDSS(击穿电压):此电压要选择合适,一般是加入的电压值的峰值的两倍.2,VGS(th)(开启电压):3,RDS(on)(漏源电阻):这个值要尽可能的小,因为 ...

  6. Oracle学习笔记之游标详解

    游标 游标存在意义:解决"select *"返回空.多行记录问题,但凡select,就可能多行结果集,也就需要用游标. 游标分4步走:cursor.open.fetch.close ...

  7. 【转】缓存淘汰算法系列之1——LRU类

    原文地址:http://www.360doc.com/content/13/0805/15/13247663_304901967.shtml 参考地址(一系列关于缓存的,后面几篇也都在这里有):htt ...

  8. 求原码、补码,反码(C语言源代码)

    #include <stdio.h> #define N 8 //这里你要求是8位 int main(int argc, const char * argv[]) { int binary ...

  9. 运用El表达式截取字符串/获取list的长度

    ${fn:substring(wjcd.lrsj, 0, 16)} 使用functions函数来获取list的长度 ${fn:length(list)} 引入 <%@ taglib prefix ...

  10. LeetCode 153. Find Minimum in Rotated Sorted Array (在旋转有序数组中找到最小值)

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...