升级React v15到v16及相关依赖

升级前后版本：

• 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，用来检查过时的，不正确的和未使用的依赖关系，以及如上图，用来更新依赖包版本。

步骤1

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

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

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

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

   //Webpack@2.7.0
   //before
   config.module.rules.push(
     { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       use: ['react-hot-loader',  'babel-loader'] 
     }
   );
   
   //after
   config.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

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

//before
import { Router, Route, hashHistory } from 'react-router'
......
<Router history={hashHistory}>
   <Route path={'/'} component={Main}></Route>
   <Route path={'one'} component={One} />      
</Router>

//after
import { 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： github.com/ReactTraini…
• React Router docs：reacttraining.com/react-route…