关键词：

react-router 更新到了4.0，很多API已经不一样了。history 被纳入了 react-router-dom 文件下的 HashRouter、BrowserRouter等。使用4.0版到react-router网站了解下新API，或者仍想按原来方式，可以安装旧版的react-router。

这两天准备用react写个新项目，自动拉取的 React-router 版本是4.1.1的版本；接下来用以前的写法就各种出不来，网上查了一下相关答案很少之后就想是不是版本的问题，果然新版本跟以前的用法稍微有点不一样的；

废话不说了 2.8 左右的版本是 稳定的，4.1.1是最近的新版本了；

2.8左右的版本的使用可以参照阮一峰的： 
http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu 
React-router的官方地址： 
https://reacttraining.com/react-router/ 
https://reacttraining.cn/

好直接上个例子，本文用 react 官方脚手架 create-react-app 
前置条件可以参照：http://blog.csdn.net/github_38095237/article/details/68491408 
里边有nodejs 与 npm 的相关配置

打开命令提示符输入

npm install react-router 
npm install react-router-dom

import React from ‘react‘ 
import {BrowserRouter as Router,Route,Link} from ‘react-router-dom‘//导入的方式跟之前有点变化

<Router> <div> <Link to="/">首页</Link> <br/> <Link to="/two">第二页</Link> <br/> <Link to="/Lists">一个列表</Link> <br/> <Route exact path="/" component={One}/> <Route path="/two" component={Two}/> <Route path="/Lists" component={List}/> </div> </Router>

react-router重定向与history.push

】react-router重定向与history.push【英文标题】：react-routerRedirectvshistory.push【发布时间】：2018-07-1503:24:06【问题描述】：我正在阅读react-router-reduxexamples，我很困惑，两者有什么区别：importRedirectfrom\'react-router-dom\'...<Redirectto=\'/logi... 查看详情

react-router4.0踩到的坑

接手的项目需要二次开发，项目是使用的react+react-router4.0+antd+redux来开发的，由于之前用的是react-router2.0，react-router2.0和4.0之间变化还是挺多的，在这里记录一下踩到遇到的问题1.dom组件不再在react-router中引入，而是在react-router-d... 查看详情

Redux 在使用 react-router 'history.push' 导航到另一个页面时丢失状态

】Redux在使用react-router\\\'history.push\\\'导航到另一个页面时丢失状态【英文标题】：Reduxlosesstatewhennavigatingtoanotherpageusingreact-router\'history.push\'Redux在使用react-router\'history.push\'导航到另一个页面时丢失状态【发布时间】：2018-05-1307:3... 查看详情

Ionic/React/TypeScript，使用 react-router history.push、history.replace 和 history.goBack 动画触发两次

】Ionic/React/TypeScript，使用react-routerhistory.push、history.replace和history.goBack动画触发两次【英文标题】：Ionic/React/TypeScript,usingreact-routerhistory.push,history.replaceandhistory.goBackAnimationtriggerstwice【发布时间】：2020-09-2914 查看详情

react-router4.0版本使用笔记

react-router4变化还是挺大的，看网上很多人遇到问题，都是基本用法的改变，所以这里记录一下。http://www.jianshu.com/p/d6727e8d81c41.react-router4.0升级不少内容，详细可看官网https://reacttraining.com/react-router/web/api/Route/Route-render-methods2.安... 查看详情

react-router(代码片段)

1、window.location当前页面地址信息属性：hrefurl完整地址hash路由，#开始的部分search查询部分，?开始的urlhost主机名及端口号hostname主机名pathnameurl路径部分方法：replace()替换reload()重新加载如：http://172.16.87.204:8900/?s=1#/invoiceLottery/lott... 查看详情

react-router4.0升级攻略

   react-router4.0出来好9了，项目在4月份的时候对react-router进行了升级，升级耗费了3天，一个坑一个坑踩了过来。   按照公司项目情况说下升级改了哪些，项目使用的是hashHistory，（BrowserHistory的情况就不清... 查看详情

React-router TypeError：_this.props.history 未定义

】React-routerTypeError：_this.props.history未定义【英文标题】：React-routerTypeError:_this.props.historyisundefined【发布时间】：2017-08-0823:55:51【问题描述】：我正在使用带有reactjs的react-router，我按照他们的文档进行操作，但遇到了这个错误编... 查看详情

React-router v4 this.props.history.push(...) 不工作

】React-routerv4this.props.history.push(...)不工作【英文标题】：React-routerv4this.props.history.push(...)notworking【发布时间】：2017-11-0221:23:57【问题描述】：我正在尝试使用this.props.history.push(..)以编程方式进行路由，但它似乎不起作用。这是... 查看详情

react项目使用react-router-dom4.0以上版本时使用hashrouter怎么控制history(代码片段)

不添加history时，来回点击Link会在控制台报错如下Warning:HashhistorycannotPUSHthesamepath;anewentrywillnotbeaddedtothehistorystack解决方案是安装使用history模块importcreateBrowserHistoryfrom"history/createBrowserHistory";constcustom 查看详情

react-router4.0学习笔记

1、安装react-router-dom 2、页面上要使用的时候要引入　import{BrowserRouterasRouter,Route,Link}from‘react-router-dom‘3、使用的时候要在外层包一个<Router>　　4、  查看详情

react-router@4.0使用和源码解析

...发中的react应用，想要引入更好的管理路由功能。那么，react-router是你最好的选择~react-router版本现今已经到4.0.0了，而上一个稳定版本还是2.8.1。相信我，如果你的项目中已经在使用react-router之前的版本，那一定要慎重的更新，... 查看详情

React-router history.listen 没有在 componentWillMount 中运行

】React-routerhistory.listen没有在componentWillMount中运行【英文标题】：React-routerhistory.listennotrunningincomponentWillMount【发布时间】：2018-11-3002:38:15【问题描述】：我正在尝试制作一个SearchResults组件，该组件根据查询字符串中的内容显示... 查看详情

[react-router]在history模式中push和replace有什么区别？

[react-router]在history模式中push和replace有什么区别？push('')：添加一个新的记录到历史堆栈,history.length+1。（一般会用来跳转到一个新页面,用户点击浏览器的回退按钮可以回到之前的路径。）replace('')&#... 查看详情

react-router4的新玩意儿

...的，拿出来说一说。本文只讨论针对浏览器的应用，使用react-router-dom（在react-router基础上封装了一些高级组件）进行说明。关于BrowserRouter：如果按照原来的使用方式，就掉进第一个坑里了：history不合法。用react 查看详情

如果使用 history.push 访问特定路由，React-Router v5 不会重定向

】如果使用history.push访问特定路由，React-Routerv5不会重定向【英文标题】：React-Routerv5notredirectingifaccessingspecificrouteusinghistory.push【发布时间】：2020-08-2316:03:30【问题描述】：在我的反应应用程序中，我有/lead-manager路线，/login路线... 查看详情

react-router/react-router-dom

参考技术A最近看了react-router源码，对react-router有了更深的理解，下面写点东西备忘：react-router-dom是对react-router的扩展，而两者实现路由跳转的本质依赖于一个history插件。此history插件是对浏览器原生history的封装。1.push2.replace3.Li... 查看详情

解决react-router/react-router-domv4history不能访问的问题

首先使用routerimportReact,{Component}from‘react‘;import{BrowserRouter,Route}from‘react-router-dom‘;import{Provider}from‘mobx-react‘;importstoresfrom‘../store/index‘;importBundlefrom‘../components/bundle‘; 查看详情