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. 3.ElasticSearch的倒排索引

    一. 正向索引 常规的索引建立方式 文档---> 关键词的映射过程(正向索引) 比如: 我有很多个文章,如果想查询其中几个文章是否含有刘耀这个关键词,那么我就需要打开所以文章,找到里面含义刘耀的 ...

  2. java连接sqlserver2008r2 心得

    现在是该轻松一笑的时候了,困扰已久的问题有了解释了. 之前的各种连不上,说到底还是权限问题,sqlserver2008r2的权限分得太细了. 两个实例间数据库互相都看不到,更不用谈访问了. 端口号也是 ...

  3. Noip2016组合数(数论)

    题目描述 组合数表示的是从n个物品中选出m个物品的方案数.举个例子,从(1,2,3) 三个物品中选择两个物品可以有(1,2),(1,3),(2,3)这三种选择方法.根据组合数的定 义,我们可以给出计算 ...

  4. json_encode()中文不转码

    php使用json_encode()把数组转换为json的时候,总会把中文进行转码,转码后从json数据上我们无法看出其中的中文文字.php5.4以后,当json_encode()的第二个参数赋值为J ...

  5. java的集合框架set 和map的深入理解

    Java的集合框架之Map的用法详解 Map有两种比较常用的实现:HashMap 和 TreeMap. HashMap: HashMap 也是无序的,也是按照哈希编码来排序的,允许使用null 值和n ...

  6. Ubuntu远程登陆、SSH图形界面、WOL远程唤醒

    本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 实现目标:通过路由器配置路由路径,将拨号获取的公网IP地址指向局域网Ubuntu服务器.家里有 ...

  7. hibernate的集合映射(详细笔记)

  8. C++输入输出cin与cout

    输入对象 istream:cin(标准输入) 输出对象 ostream: cout(标准输出), cerr(标准错误),clog(输出程序运行时的一般性信息)

  9. _.contains is not a function

    在使用lodash的时候报_.contains is not a function,这是因为从lodash V3.10.1开始,将去掉contains函数,改用includes. 可以换为:_.con ...

  10. spark streaming 实例

    spark-streaming读hdfs,统计文件中单词数量,并写入mysql package com.yeliang; import java.sql.Connection; import java ...