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. DevOps之服务手册

    唠叨话 关于德语噢屁事的知识点,仅提供精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <DevOps服务手册(Manual)> <IT资源目标化>1.设施和设备(I ...

  2. Extjs6(五)——写一个包含toolbar、form、grid的子页面

    本文基于ext-6.0.0 这个页面布局是很多管理系统的常用布局,具体如下图: 一.页面主体personalInfo.js 整个页面采用border布局,分成三部分,这个personalInfo.js ...

  3. (转)十分钟入门pandas

    本文是对pandas官方网站上<10 Minutes to pandas>的一个简单的翻译,原文在这里.这篇文章是对pandas的一个简单的介绍,详细的介绍请参考:Cookbook . 习 ...

  4. FixedUpdate真的是固定的时间间隔执行吗?聊聊游戏定时器

    0x00 前言 有时候即便是官方的文档手册也会让人产生误解,比如本文将要讨论的Unity引擎中的FixedUpdate方法. This function is called every fixed f ...

  5. UVa10723 - Cyborg Genes

    这题我能想到的解决方法是: 最优解的长度好找,两串的长度和-LCS: 根据anslen,枚举出解的数目...但想不出简单有效的枚举方法,这种做法可能超时 网上看大神的博客后,发现大家都用的此方法: 最 ...

  6. Java并发之CountDownLatch、CyclicBarrier和Semaphore

    CountDownLatch 是能使一组线程等另一组线程都跑完了再继续跑:CyclicBarrier 能够使一组线程在一个时间点上达到同步,可以是一起开始执行全部任务或者一部分任务. CountDow ...

  7. Msys2配置总结

    一.MSYS2的MirrorList配置 1.修改msys2安装目录下的/etc/pacman.d文件夹里面的3个mirrorlist.*文件 [mirrorlist.mingw32] #中国科学技术 ...

  8. Java基础笔记6

    OOP(Object Oriented Programmer) 面向对象编程     面向对象编程的语言:JAVA,C#,PHP,ASP 用途:把现实中的任何对象描述成java语言. java面向对象 ...

  9. 关于CSS3 object-position/object-fit属性的使用

    object-position/object-fit属性一般用在替换元素上. 什么叫替换元素? 不是所有元素都叫"替换元素".在CSS中,"替换元素"指的是: ...

  10. Java语言写出水仙花数,

    package com.llh.demo;/** * 水仙花数 * @author llh * */public class Demo14 {    public static void main(S ...