raact-router history报错问题

Posted 2020-10-08 RunningAndRunning

刚刚开始学习react，我的代码大致如下：

import React from \'react\';
import ReactDOM from \'react-dom\';
import { Router, Route, browserHistory, hashHistory } from \'react-router\';
import App from \'./components/App\';
ReactDOM.render((
    <Router history={browserHistory}>
        <Route path="/" component={App}></Route>
    </Router>
), document.getElementById(\'app\'));

很纳闷为什么我明明是按照文档上面的一步一步操作的为什么会报错呢？

网上查阅资料发现，我的那种写法是react-router2.x的写法 ，react-router 更新到了4.0，很多API已经不一样了。history 被纳入了 react-router-dom 文件下的 HashRouter、BrowserRouter等。使用4.0版到react-router网站了解下新API，或者仍想按原来方式，可以安装旧版的react-router。

官方文档的网址：https://reacttraining.com/react-router/

一脸懵比，解决了这个问题又出现了别的问题，报错信息如下：

You should not use <Route component> and <Route children> in the same route

查了下资料发现还是react-router的版本问题：

在4.0以下的react router中，嵌套的路由可以放在一个router标签中，形式如下,嵌套的路由也直接放在一起。

<Route component={App}>
    <Route path="groups" components={Groups} />
    <Route path="users" components={Users}>
      <Route path="users/:userId" component={Profile} />
    </Route>
</Route>

但是在4.0以后，嵌套的路由与之前的就完全不同了，需要单独放置在嵌套的根component中去处理路由，否则会一直有warning。