React-router 4.0 history报错

Posted 2020-09-20 王者风范

 

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>