react-router 从 v2/v3 to v4 迁移

原文地址

react-router v4 是完全重写的，所以没有简单的迁移方式，这份指南将为您提供一些步骤，以帮助您了解如何升级应用程序。

注意: 这份迁移指南适用于react-router v2和v3，但为简洁起见，对以前版本的引用仅提及v3。

• The Router

• Routes

  • 路由嵌套

  • on* 属性

  • Switch

The Router

在react-router v3中，仅有一个 组件，需要提供 history 对象作为他的属性 (prop)。

此外，您可以使用 routes 作为 的属性 (prop) 或者作为 children 的方式来定义程序的路由结构。

// v3
import routes from './routes'

// or

  
    // ...
  

使用 react-router v4，一个最大的改变就是可以有很多不同的 router 组件，每个 router 组件都会为您创造出一个 history 对象， 会创建 brower history， 会创建 hash history， 会创建 memory history。

在v4中，没有集中的路由配置。任何需要根据路由渲染内容的地方，您只需渲染一个 组件。

// v4

  

    
    
  

有一点需要注意的就是 router 组件只能被赋予一个子元素

// yes

  

    
    
  


// no

  
  

Routes

在 v3， 并不是一个组件，相反，您程序中所有的 元素仅用于创建路由配置对象。

/// in v3 the element

// 相当于
{
  path: 'contact',
  component: Contact
}

使用 v4，您可以像常规的 React 程序一样布局您应用中的组件，您要根据位置（特别是其 pathname ）呈现内容的任何位置，您将呈现

在 v4， 其实是一个组件，所以无论你在哪里渲染 ，它里面的内容都会被渲染。当 的 path 与当前的路径匹配时，它将会渲染 component, render, or children 属性中的内容，当 的 path 与当前的路径不匹配时，将会渲染 null

路由嵌套

在 v3 中， 组件是作为其父 组件的 children 嵌套其中的。

当嵌套的 匹配时，react 元素将会使用子 和 父 的 component 属性去构建，子元素将作为父元素的 children 属性。

使用 v4，子 应该由父 呈现。

const Parent = () => (
  

    
    
  
)

on* 属性

react-router v3 提供 onEnter, onUpdate, and onLeave 方法。这些方法本质上是重写（覆盖）了 react 生命周期方法

使用 v4，你将会使用生命周期方法 通过 渲染的组件，你可以使用 componentDidMount 或 componentWillMount 代替 onEnter，你可以使用 componentDidUpdate 或者 componentWillUpdate (更或者 componentWillReceiveProps) 代替 onUpdate，你可以使用 componentWillUnmount 代替 onLeave。

在v3中，您可以指定一些子路由，并且只会渲染匹配到的第一个。

// v3

  
  
  

v4 通过 组件提供了相似的功能，当 被渲染时，它仅会渲染与当前路径匹配的第一个子 。

// v4
const App = () => (
  
    
    
    
  
)