ReactJS & dva 项目常见报错问题与解决方法 （react-router 4）

1. 项目中用 dva-cli 生成路由：

    命令行：$ dva g route users

报错信息：

AssertionError [ERR_ASSERTION]: getRouterTree: component should be one of Router, Route, Redirect, IndexRedirect, IndexRoute
    at parse (C:\Users\Administrator\AppData\Roaming\npm\node_modules\dva-cli\node_modules\dva-ast\lib\collections\Router.js:57:28)
    at ret.children.node.children.filter.map.node (C:\Users\Administrator\AppData\Roaming\npm\node_modules\dva-cli\node_modules\dva-ast\lib\coll
ections\Router.js:94:93)
    at Array.map (<anonymous>)
    at parse (C:\Users\Administrator\AppData\Roaming\npm\node_modules\dva-cli\node_modules\dva-ast\lib\collections\Router.js:94:81)
    at NodePath.simpleMap.path (C:\Users\Administrator\AppData\Roaming\npm\node_modules\dva-cli\node_modules\dva-ast\lib\collections\Router.js:1
17:13)
    at NodePath.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\dva-cli\node_modules\dva-ast\lib\collections\Helper.js:21:2
8)
    at __paths.forEach (C:\Users\Administrator\AppData\Roaming\npm\node_modules\dva-cli\node_modules\jscodeshift\src\Collection.js:76:36)
    at Array.forEach (<anonymous>)
    at Collection.forEach (C:\Users\Administrator\AppData\Roaming\npm\node_modules\dva-cli\node_modules\jscodeshift\src\Collection.js:75:18)
    at Collection.simpleMap (C:\Users\Administrator\AppData\Roaming\npm\node_modules\dva-cli\node_modules\dva-ast\lib\collections\Helper.js:20:1

解决方法： 这个时候项目其实已经生成了新的users路由。把router.js里自动生成的users放进switch标签中。

   <Router history={history}>
<Switch>
<Route path="/" exact component={IndexPage} />
<Route path="/users" component={Users} />
</Switch>
</Router>

2. 项目里在 js 函数中进行路由跳转

1. 在router.js中进行组件的路由绑定

2. 在js文件中的函数中进行跳转（以路由为 ' /user ' 为例），在js中添加：

        this.props.history.push('/users');

浏览器中 ：

3. 项目中在页面里进行多层路由跳转

1. 在 主页面 中进行组件的路由绑定

<Route path="/admin/AllHome"
render={() =>
<div>
<Switch>
<Route path="/admin/AllHome/AllHomeAdd" component={AllHomeAdd}></Route>
<Route path="/admin/AllHome" component={AllHome}></Route>
</Switch>
</div>
   }
  >
</Route>

1. 应用