react-router v4 是完全重寫的，所以沒有簡單的遷移方式，這份指南將為您提供一些步驟，以幫助您了解如何升級應用程序。

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

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

The Router

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

此外，您可以使用?routes?作為?<Router>?的屬性 (prop) 或者作為?children?的方式來定義程序的路由結構。

// 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 組件都會為您創造出一個?history?對象，<BrowserRouter>?會創建 brower history，<HashRouter>?會創建 hash history，<MemoryRouter>?會創建 memory history。

在v4中，沒有集中的路由配置。任何需要根據路由渲染內容的地方，您只需渲染一個?<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>?元素僅用于創建路由配置對象。

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

使用 v4，您可以像常規的 React 程序一樣布局您應用中的組件，您要根據位置（特別是其?pathname?）呈現內容的任何位置，您將呈現?<Route>

在 v4，<Route>?其實是一個組件，所以無論你在哪里渲染?<Route>，它里面的內容都會被渲染。當?<Route>?的?path?與當前的路徑匹配時，它將會渲染?component,?render, or?children?屬性中的內容，當?<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?屬性去構建，子元素將作為父元素的?children?屬性。

<Parent {...routeProps}> <Child {...routeProps} /> </Parent>

使用 v4，子?<Route>?應該由父?<Route>?呈現。

<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?方法。這些方法本質上是重寫（覆蓋）了 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> )

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。