升级前后版本:
- 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.2
- npm install --save-dev react-hot-loader@4.1.2
升级 react-hot-loader 后, 需要注意:
去掉 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']
- }
- );
修改. 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 { Router, Route, hashHistory } from 'react-router'
- ......
- <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
来源: http://www.jianshu.com/p/bf43e743e63c