升级前后版本：

• react 15.6.2 > 16.3.2

• react-dom 15.6.2 > 16.3.2

• react-router 2.8.1 > X

• react-hot-loader 1.3.1 > 4.1.2

npm-check

首先推荐一个实用工具——npm-check，用来检查过时的，不正确的和未使用的依赖关系，以及如上图，用来更新依赖包版本。

步骤1

升级react、react-dom、react-hot-loader，使用npm-check -u或者

npm install --save react@16.3.2 react-dom@16.3.2npm install --save-dev react-hot-loader@4.1.2

升级react-hot-loader后，需要注意：

1. 去掉 Webpack配置中的react-hot-loader

   //Webpack@2.7.0//beforeconfig.module.rules.push(
     { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       use: ['react-hot-loader',  'babel-loader'] 
     }
   );//afterconfig.module.rules.push(
     { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       use: [ 'babel-loader'] 
     }
   );

2. 修改.babelrc文件，往plugins中添加一项react-hot-loader/babel

   //after"plugins": [
     ......
     ["react-hot-loader/babel"]
   ]

步骤2

在react-router v4中，react-router会导出核心组件和功能。 react-router-dom导出支持DOM的组件，因此web开发只需要导入react-router-dom。
所以移除旧版本react-router，然后安装react-router-dom。

npm uninstall react-router
npm install react-router-dom

然后根据新版本需要改动：

//beforeimport { Router, Route, hashHistory } from 'react-router'......
<Router history={hashHistory}>   <Route path={'/'} component={Main}></Route>
   <Route path={'one'} component={One} />      
</Router>//afterimport { Switch, Route, HashRouter } from 'react-router-dom'......
<HashRouter>    <Switch>
      <Route exact path={'/'} component={Main} />
      <Route path={'/one'} component={One} />  
    </Switch>          </HashRouter>

升级react-router更多信息可以前往：

• Migrating from v2/v3 to v4： https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md

• React Router docs：https://reacttraining.com/react-router/web/example/basic

作者：Evelynzzz
链接：https://www.jianshu.com/p/bf43e743e63c