ReactJS & dva 项目常见报错问题与解决方法 (react-router 4)
2018-01-03 14:57
1571 查看
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_mod 4000 ules\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. 项目中在页面里进行多层路由跳转
在 主页面 中进行组件的路由绑定<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>
应用
4.antdPro项目打包之后,因为代码分割所以打包成多个0.async.js 这样的js文件,解决代码分割后js的文件路径问题
解决方法:打包后的项目中,找到index.*.js文件,文件中搜索“src”关键字,加“./”
5. 解决Menu菜单和页面地址同步问题
问题描述 : 模块热加载或者浏览器强制刷新后,页面更新后菜单栏的激活列和地址和展示内容往往不同步。menu的主页面中:
//点击导航,menu selected变色 SelectMenu = () =>{ var path = window.location.href.split('#')[1]; this.setState({ selectedKeys:path }) }
<Menu mode="horizontal" selectedKeys = {[this.state.selectedKeys]} onClick = {this.SelectMenu()} > {this.getNavMenuItems(this.menus)} </Menu>
相关文章推荐
- reactjs常见问题解决方法
- 用VirtualBox 安装LFS常见问题的解决方法:“VFS: Unable to mount root device "hda1" or unknown-block(2,0)”
- 整理前端css/js/jq常见问题及解决方法(2)
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
- linux 内核编译:内核配置原理与常见配置问题的解决方法&&内核版本控制解析
- MVC5 新建项目里不包含jquery.unobtrusive-ajax.js(MVC5异步表单的问题)解决方法
- 遇到的常见JS与CSS问题及解决方法
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
- 试着用React写项目-利用react-router解决跳转路由等问题(一)
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法 ( 摘自zdwzdwzdw)
- 试着用React写项目-利用react-router解决跳转路由等问题(三)
- 试着用React写项目-利用react-router解决跳转路由等问题(一)
- 试着用React写项目-利用react-router解决跳转路由等问题(三)
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
- VS中常见bug问题解决方法——iostream.h&全工程的全局变量&光标阴影
- VC6.0项目转为VS2010遇到常见问题的解决方法
- JS中常见的浏览器兼容问题和解决方法
- IE 下js里面new Date("2011-11-11") 出现nan的问题以及解决方法
- linux 内核编译:内核配置原理与常见配置问题的解决方法&&内核版本控制解析
- js常见跨域问题及解决方法