react-router 从 v2/v3 to v4 迁移

英文原文地址

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
4000
>

使用 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>
)