背景本人目前从事的React项目历史悠久，使用Redux，写代码的体验不是很好，所以想升级引入dva。以前使用dva的时候是直接用dva-cli生成dva的工程，或者使用antdesignpro的时候是用umi直接生成react+antd+dva的工程，节省了很多配置成本。不过这些案例都是在项目初期直接引入dva的。对于已有的react项目，如果要升级到dva，应该如何引入？在引入dva的过程中会遇到哪些问题？升级到dva用了半天，这里总结一下升级过程中遇到的问题。引入项目：nw.js+react+redux+antd（客户端应用）目标：redux->dva先准备安装dva（当前版本2.4.1）npminstalldva--save参考官方文档，改造项目进入dva模式，添加或修改src下的入口文件index.jsimportdvafrom'dva';importcreateHistoryfrom'history/createHashHistory';//1.Initializeconstapp=dva({history:createHistory(),});//2。Plugins//app.use({});//3.Model//app.model(require('./models/app').default);//4.Routerapp.router(require('./router').default);//5.Startapp.start('#root');然后添加路由文件router.jsimportReactfrom'react';import{Router,Route,Switch}from'dva/router';importAppfrom'./containers/App';import{Account,Articles,Channels,Editor}from'./containers';const{ArticleList}=Articles;constRouterConfig=(({history})=>());exportdefaultRouterConfig;说明：App组件是整个页面的容器组件，包括menu、header、footer和一些常用的部分。通过切换菜单匹配对应的路由，可以跳转到各个子组件页面，所以路由配置需要写成嵌套的形式。更多路由配置参考react-router官方文档。至此，最简单的dva模式已经配置完成，只要在相应的组件中设置好model和reducer，并在页面中进行connect，就可以使用dva来管理状态了。问题解决后，配置完成后重启项目，查看页面效果如下：发现容器部分渲染成功，但是子路由对应的页面（默认是Account）没有渲染，然后控制台发现报错。首先是这样一条警告信息：Warning:Pleaseuse`require(“history”).createHashHistory`而不是`require(“history/createHashHistory”)`。在下一个主要版本中将删除对后者的支持。在dva中issure中发现同样的问题，按照提示改成如下格式即可。constcreateHistory=require('history').createBrowserHistory;然后出现关于路由问题的警告：Warning:Youshouldnotuseandinthesameroute;会被忽略React-router4.0以上版本不推荐使用像下面这样的嵌套路由，直接改成组件嵌套的形式（注意子路由的路径要加/）就可以了。改完重启后，这两个警告就没有了。继续看路由和渲染的问题。按理来说，进入应用时，默认会显示Account组件（因为配置了IndexRoute），修改文件刷新页面时，页面会直接报错，如下：因此，是猜测是页面路由的配置有问题，找了相关资料（React填坑的react-router刷新后报错的解决办法），结果是问题出在dva中BrowserHistory的使用，直接将BrowserHistory改成HashHistory即可。//constcreateHistory=require('history').createBrowserHistory;constcreateHistory=require('history').createHashHistory;重启项目，尝试切换路由，发现一切正常。后面可以在页面修改dva。dva中model和reducer的使用比较简单。按照文档试试就可以了，这里就不一一描述了。总结归纳一下在项目中引入dva遇到的几个问题。从'history/createHashHistory'导入createHistory；wording带来有关使用createHashHistory导致的页面刷新失败的警告。嵌套路由配置问题。参考资料基于create-react-app官方脚手架以dva方式搭建项目（一）React-Router中文文档DvaJS文档本文由博文发布平台OpenWrite发布！
