React-router 4.0 history报错

Posted 王者风范

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React-router 4.0 history报错相关的知识,希望对你有一定的参考价值。

 

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 4.0 history报错的主要内容,如果未能解决你的问题,请参考以下文章

react-router 4.0根据当前url显示导航

React 项目使用 React-router-dom 4.0 以上版本时使用 HashRouter 怎么控制 history

React-Router 4 的新玩意儿

react-router 4.0踩到的坑

react-router v4 使用 history 控制路由跳转

react-router 4.0版本使用笔记