react-router v4 是完全重寫的，所以沒有簡單的遷移方式戈次，這份指南將為您提供一些步驟耸彪，以幫助您了解如何升級應(yīng)用程序。
注意: 這份遷移指南適用于react-router v2和v3栈雳，但為簡潔起見护奈，對以前版本的引用僅提及v3。
The Router
在react-router v3中哥纫，僅有一個<Router> 組件霉旗，需要提供 history 對象作為他的屬性 (prop)。
此外蛀骇，您可以使用 routes 作為 <Router> 的屬性 (prop) 或者作為 children 的方式來定義程序的路由結(jié)構(gòu)厌秒。
// v3
import routes from './routes'
<Router history={browserHistory} routes={routes} />
// or
<Router history={browserHistory}>
<Route path='/' component={App}>
// ...
</Route>
</Router>
使用 react-router v4，一個最大的改變就是可以有很多不同的 router 組件擅憔，每個 router 組件都會為您創(chuàng)造出一個 history 對象鸵闪，<BrowserRouter> 會創(chuàng)建 brower history，<HashRouter> 會創(chuàng)建 hash history暑诸，<MemoryRouter> 會創(chuàng)建 memory history蚌讼。
在v4中，沒有集中的路由配置个榕。任何需要根據(jù)路由渲染內(nèi)容的地方篡石，您只需渲染一個 <Route> 組件。
// v4
<BrowserRouter>
<div>
<Route path='/about' component={About} />
<Route path='/contact' component={Contact} />
</div>
</BrowserRouter>
有一點需要注意的就是 router 組件只能被賦予一個子元素
// yes
<BrowserRouter>
<div>
<Route path='/about' component={About} />
<Route path='/contact' component={Contact} />
</div>
</BrowserRouter>
// no
<BrowserRouter>
<Route path='/about' component={About} />
<Route path='/contact' component={Contact} />
</BrowserRouter>
Routes
在 v3西采，<Route> 并不是一個組件凰萨，相反，您程序中所有的<Route> 元素僅用于創(chuàng)建路由配置對象。
/// in v3 the element
<Route path='contact' component={Contact} />
// 相當于
{
path: 'contact',
component: Contact
}
使用 v4沟蔑，您可以像常規(guī)的 React 程序一樣布局您應(yīng)用中的組件湿诊，您要根據(jù)位置（特別是其 pathname ）呈現(xiàn)內(nèi)容的任何位置，您將呈現(xiàn) <Route>
在 v4瘦材，<Route> 其實是一個組件厅须，所以無論你在哪里渲染 <Route>，它里面的內(nèi)容都會被渲染食棕。當 <Route> 的 path 與當前的路徑匹配時朗和，它將會渲染 component, render, or children 屬性中的內(nèi)容，當 <Route> 的 path 與當前的路徑不匹配時簿晓，將會渲染 null
路由嵌套
在 v3 中眶拉，<Route> 組件是作為其父 <Route> 組件的 children 嵌套其中的。
<Route path='parent' component={Parent}>
<Route path='child' component={Child} />
<Route path='other' component={Other} />
</Route>
當嵌套的 <Route> 匹配時憔儿，react 元素將會使用子 <Route> 和 父 <Route> 的 component 屬性去構(gòu)建忆植，子元素將作為父元素的 children 屬性。
<Parent {...routeProps}>
<Child {...routeProps} />
</Parent>
使用 v4谒臼，子 <Route> 應(yīng)該由父 <Route> 呈現(xiàn)朝刊。
<Route path='parent' component={Parent} />
const Parent = () => (
<div>
<Route path='child' component={Child} />
<Route path='other' component={Other} />
</div>
)
on* 屬性
react-router v3 提供 onEnter, onUpdate, and onLeave 方法。這些方法本質(zhì)上是重寫（覆蓋）了 react 生命周期方法
使用 v4蜈缤，你將會使用生命周期方法 通過 <Route> 渲染的組件拾氓，你可以使用 componentDidMount 或 componentWillMount 代替 onEnter，你可以使用 componentDidUpdate 或者 componentWillUpdate (更或者 componentWillReceiveProps) 代替 onUpdate底哥，你可以使用 componentWillUnmount 代替 onLeave咙鞍。
<Switch>
在v3中，您可以指定一些子路由趾徽，并且只會渲染匹配到的第一個续滋。
// v3
<Route path='/' component={App}>
<IndexRoute component={Home} />
<Route path='about' component={About} />
<Route path='contact' component={Contact} />
</Route>
v4 通過 <Switch> 組件提供了相似的功能，當 <Switch> 被渲染時孵奶，它僅會渲染與當前路徑匹配的第一個子 <Route>吃粒。
// v4
const App = () => (
<Switch>
<Route exact path='/' component={Home} />
<Route path='/about' component={About} />
<Route path='/contact' component={Contact} />
</Switch>
)
