那篇文章主要说明了，升级到 Webpack 2 之后，通过升级
webpack-dev-server和react-hot-loader插件，使模块热替换（HMR）再次生效。但后来发现，其实并没有完全生效。
问题
项目中的 Route 使用了System.import(/* webpackChunkName: "example" */ './example.js)来实现模块的动态加载，也就是根据组件打包成多个 bundle，只有在点击到对应的 Route 时，这个 bundle 才会被加载，而不是在打开首页时，加载所有的 bundle。
问题是，当我们修改某个标签页对应的组件时，会发现 HMR 并不是每次都生效。热替换过程会报错（类似[HMR] unexpected require(116) from disposed module 26），并且无法切换标签页了。
根据这篇讨论webpack2 + hot-reload: Not works with System.import，我决定升级 React Router 到v4并且将 System.import() 替换成 import()。
升级到 React Router v4
版本变化：
webpack：2.7.0
react-hot-loader： 4.1.2
react：0.14.7 >>> 15.6.2
react-dom：0.14.7 >>> 15.6.2
react-router: 2.5.2 卸载，安装 react-router-dom 4.3.0-rc.3
react和react-dom是顺便升级的，并不强制。主要的升级是 react-router v2到v4。在v4版本中， Web开发只需要安装react-router-dom，参考what's the diff between 'react-router-dom' & 'react-router'?中的回答。
React Router v4变化挺大的。因此看官方文档（点这里）是很有必要的。
动态路由（Dynamic Routing）
React Router从v4开始，不再是静态路由（Static Routing），而变成了动态路由（Dynamic Routing）。前者是我们习惯的用法，一般需要在应用初始化过程中声明路由，这时候页面还没有任何渲染；后者则意味着，路由会随着应用的渲染而发生，而不是一个在运行的应用之外的配置。React Router v4中的任何东西都是一个组件。
When we say dynamic routing, we mean routing that takes place as your app is rendering, not in a configuration or convention outside of a running app. That means almost everything is a component in React Router.
一开始看到这部分我还没太明白，直到我意识到，我不再需要在一个Root组件中定义所有的 Route，而是可以在任何组件内部添加一个 Route 时，我才弄懂这个“动态路由”的意思。就跟我们平时使用自定义的组件是一样的，想在哪里渲染，就加到哪里。参照示例Sidebar。
You can render a <Route> in as many places as you want in your app. It will render along with any other <Route>s that also match the URL. So, a sidebar or breadcrumbs or anything else that requires you to render multiple things in multiple places at the same URL is nothing more than multiple <Route>s.
嵌套路由（Nested Routing）
v4版本以前，我们可能会用到嵌套路由，尤其是当页面中有导航栏时。比如：
<Route path='parent' component={Parent}>
<Route path='child' component={Child} />
<Route path='other' component={Other} /></Route>当嵌套的内存路由匹配时，外层路由和内层路由对应的组件都会被渲染出来，而且子组件会通过props.children传递给父组件，也就是子组件会渲染到父组件 render 方法中{this.props.children}所在的位置。
v4版本时，就不需要在 Route 配置的地方嵌套好几个 Route，也不需要使用 this.props.children 指明子组件渲染的位置。只需要在父组件相应的位置添加 Route 即可。就跟嵌套一个 div 一样。
<Route path='parent' component={Parent} />const Parent = () => ( <div>
//...... <Route path='child' component={Child} />
<Route path='other' component={Other} />
</div>)重定向路由
v4去掉 <IndexRedirect>了。要实现重定向可以使用<Redirect>组件。
// v3<Route path="/" component={App}> <IndexRedirect to="/welcome" /></Route>// v4<Route exact path="/" render={() => <Redirect to="/welcome" component={App} />} />
//Switch限定只渲染第一个匹配的 Route<Switch>
<Route exact path="/" component={App} />
<Route path="/login" component={Login} />
<Redirect path="*" to="/" /> //当以上的path均不匹配时，重定向到'/'</Switch>局部刷新/整体刷新
局部刷新
<Link to='/home' />
整个页面刷新：
window.location.href = '/home'//or<a href='/home' ></a>
动态加载
修改前：
<Route path="/settings"
getComponent={(location, callback) => { import(/* webpackChunkName: "Settings" */ './Settings.js').then(component => {
callback(null, component.default || component)
})
}}
/>根据官方文档中的 Code Splitting 部分，实现动态加载需要 webpack，babel-plugin-systax-dynamic-import和react-loadable。
修改后：
<Route exact path="/settings"
component={Loadable({ loader: () => import(/* webpackChunkName: "Settings" */ './Settings.js'), loading:Loading
})}
/>综上就是升级过程的重点了。至此，动态加载和HMR都没问题了。
作者：Evelynzzz
链接：https://www.jianshu.com/p/25f8cb1d6276
随时随地看视频
