react-router v4 是完全重寫(xiě)的，所以沒(méi)有簡(jiǎn)單的遷移方式，這份指南將為您提供一些步驟，以幫助您了解如何升級(jí)應(yīng)用程序。

注意:?這份遷移指南適用于react-router v2和v3，但為簡(jiǎn)潔起見(jiàn)，對(duì)以前版本的引用僅提及v3。

• The Router
• Routes
  • 路由嵌套
  • on* 屬性
  • Switch

The Router

在react-router v3中，僅有一個(gè)<Router>?組件，需要提供 history 對(duì)象作為他的屬性 (prop)。

此外，您可以使用?routes?作為?<Router>?的屬性 (prop) 或者作為?children?的方式來(lái)定義程序的路由結(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，一個(gè)最大的改變就是可以有很多不同的 router 組件，每個(gè) router 組件都會(huì)為您創(chuàng)造出一個(gè)?history?對(duì)象，<BrowserRouter>?會(huì)創(chuàng)建 brower history，<HashRouter>?會(huì)創(chuàng)建 hash history，<MemoryRouter>?會(huì)創(chuàng)建 memory history。

在v4中，沒(méi)有集中的路由配置。任何需要根據(jù)路由渲染內(nèi)容的地方，您只需渲染一個(gè)?<Route>?組件。

// v4 <BrowserRouter><div><Route path='/about' component={About} /> <Route path='/contact' component={Contact} /> </div> </BrowserRouter>

有一點(diǎn)需要注意的就是 router 組件只能被賦予一個(gè)子元素

// 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>?并不是一個(gè)組件，相反，您程序中所有的<Route>?元素僅用于創(chuàng)建路由配置對(duì)象。

/// in v3 the element <Route path='contact' component={Contact} /> // 相當(dāng)于 {path: 'contact', component: Contact }

使用 v4，您可以像常規(guī)的 React 程序一樣布局您應(yīng)用中的組件，您要根據(jù)位置（特別是其?pathname?）呈現(xiàn)內(nèi)容的任何位置，您將呈現(xiàn)?<Route>

在 v4，<Route>?其實(shí)是一個(gè)組件，所以無(wú)論你在哪里渲染?<Route>，它里面的內(nèi)容都會(huì)被渲染。當(dāng)?<Route>?的?path?與當(dāng)前的路徑匹配時(shí)，它將會(huì)渲染?component,?render, or?children?屬性中的內(nèi)容，當(dāng)?<Route>?的?path?與當(dāng)前的路徑不匹配時(shí)，將會(huì)渲染?null

路由嵌套

在 v3 中，<Route>?組件是作為其父?<Route>?組件的?children?嵌套其中的。

<Route path='parent' component={Parent}> <Route path='child' component={Child} /> <Route path='other' component={Other} /> </Route>

當(dāng)嵌套的?<Route>?匹配時(shí)，react 元素將會(huì)使用子?<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ì)上是重寫(xiě)（覆蓋）了 react 生命周期方法

使用 v4，你將會(huì)使用生命周期方法 通過(guò)?<Route>?渲染的組件，你可以使用?componentDidMount?或?componentWillMount?代替?onEnter，你可以使用?componentDidUpdate?或者?componentWillUpdate?(更或者?componentWillReceiveProps) 代替?onUpdate，你可以使用?componentWillUnmount?代替?onLeave。

<Switch>

在v3中，您可以指定一些子路由，并且只會(huì)渲染匹配到的第一個(gè)。

// v3 <Route path='/' component={App}> <IndexRoute component={Home} /> <Route path='about' component={About} /> <Route path='contact' component={Contact} /> </Route>

v4 通過(guò)?<Switch>?組件提供了相似的功能，當(dāng)?<Switch>?被渲染時(shí)，它僅會(huì)渲染與當(dāng)前路徑匹配的第一個(gè)子?<Route>。

// v4 const App = () => (<Switch><Route exact path='/' component={Home} /> <Route path='/about' component={About} /> <Route path='/contact' component={Contact} /> </Switch> )

總結(jié)

以上是生活随笔為你收集整理的react-router 从 v2/v3 to v4 迁移（翻译）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。