react-router 从 v2/v3 to v4 迁移(翻译)

前端之家收集整理的这篇文章主要介绍了react-router 从 v2/v3 to v4 迁移(翻译)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

原文地址

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

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

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> 渲染的组件,你可以使用 componentDidMountcomponentWillMount 代替 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>
)
原文链接:https://www.f2er.com/react/303784.html

猜你在找的React相关文章