[Web 前端] React Router v4 入坑指南

cp from : https://www.jianshu.com/p/6a45e2dfc9d9

万恶的根源

距离React Router v4 正式发布也已经过去三个月了，这周把一个React的架子做了升级，之前的路由用的还是v2.7.0版的，所以决定把路由也升级下，正好“尝尝鲜”...

江湖传言，目前官方同时维护 2.x 和 4.x 两个版本。（ヾ(｡ꏿ﹏ꏿ)ﾉﾞ咦，此刻相信机智如我的你也会发现，ReactRouter v3 去哪儿了？整丢了？？巴拉出锅了？？？敢不敢给我个完美的解释！？）事实上 3.x 版本相比于 2.x 并没有引入任何新的特性，只是将 2.x 版本中部分废弃 API 的 warning 移除掉而已。按照规划，没有历史包袱的新项目想要使用稳定版的 ReactRouter 时，应该使用 ReactRouter 3.x。目前 3.x 版本也还处于 beta 阶段，不过会先于 4.x 版本正式发布。如果你已经在使用 2.x 的版本，那么升级 3.x 将不会有任何额外的代码变动。

礼貌性简介下

 

react router v4.jpg

React Router V4 相较于前面三个版本有根本性变化，首先是遵循Just Component的 API 设计理念，其次API方面也精简了不少，对新手来说降低了学习难度，但如果是对之前项目的重构，嗯，简直无**可说。本次升级的主要特点如下：

• 声明式（Declarative）
• 可组合 （Composability）

React Router V4 遵循了 React 的理念：万物皆组件。因此 升级之后的 Route、Link、Switch等都是一个普通的组件。

React Router V4 基于 Lerna 管理多个 Repository。在此代码库包括：

• react-router React Router 核心
• react-router-dom 用于 DOM 绑定的 React Router
• react-router-native 用于 React Native 的 React Router
• react-router-redux React Router 和 Redux 的集成
• react-router-config 静态路由配置帮助助手

插件初引入

通常我们在 React 的使用中，一般要引入两个包，react和 react-dom，那么react-router和react-router-dom是不是两个都要引用呢？注意，前方高能，入门第一坑就在这里。他们两个只要引用一个就行了，不同之处就是后者比前者多出了<Link> <BrowserRouter>这样的 DOM 类组件。因此我们只需引用react-router-dom这个包就OK了。当然，如果搭配redux，你还需要使用react-router-redux。

主要组件简介

<Router>

在4.0之前版本的 API 中，<Router> 组件的 children 只能是 React Router 提供的各种组件，如<Route>、<IndexRoute>、<Redirect>等。而在 React Router 4 中，你可以将各种组件及标签放进 <Router>组件中，他的角色也更像是 Redux 中的 <Provider>。不同的是<Provider>是用来保持与 store 的更新，而<Router>是用来保持与 location 的同步。示例如下：

// 示例1

<Router>
    <div>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/about">关于</Link></li>
        <li><Link to="/topics">主题列表</Link></li>
      </ul>
 
      <hr/>
 
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>

Router是所有路由组件共用的底层接口，一般我们的应用并不会使用这个接口，而是使用高级的路由：

• <BrowserRouter>：使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步；
• <HashRouter>：使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步；
• <MemoryRouter>：能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写)；
• <NativeRouter>：为使用React Native提供路由支持；
• <StaticRouter>：从不会改变地址；

TIPS：算是第二坑吧，和之前的Router不一样，这里<Router>组件下只允许存在一个子元素，如存在多个则会报错。

反面典型在这里：

// 示例2

<Router>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/about">关于</Link></li>
        <li><Link to="/topics">主题列表</Link></li>
      </ul>
 
      <hr/>
 
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
  </Router>

没错，示例2在没有<div>爸爸的保护下，会报如下异常信息：

 

error.jpg

<Route>

我们知道，Route组件主要的作用就是当一个location匹配路由的path时，渲染某些UI。示例如下：

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>
 
// 如果应用的地址是/,那么相应的UI会类似这个样子：
<div>
  <Home/>
</div>
 
// 如果应用的地址是/news,那么相应的UI就会成为这个样子：
<div>
  <NewsFeed/>
</div>

<Route>组件有如下属性：

• path（string）: 路由匹配路径。（没有path属性的Route 总是会 匹配）；
• exact（bool）：为true时，则要求路径与location.pathname必须完全匹配；
• strict（bool）：true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname；

再次奉上两个鲜活的例子：

exact配置：

路径	location.pathname	exact	是否匹配
/one	/one/two	true	否
/one	/one/two	false	是

strict配置：

路径	location.pathname	strict	是否匹配
/one/	/one	true	否
/one/	/one/	true	是
/one/	/one/two	true	是

同时，新版的路由为<Route>提供了三种渲染内容的方法：

• <Route component>：在地址匹配的时候React的组件才会被渲染，route props也会随着一起被渲染；
• <Route render>：这种方式对于内联渲染和包装组件却不引起意料之外的重新挂载特别方便；
• <Route children>：与render属性的工作方式基本一样，除了它是不管地址匹配与否都会被调用；

第一种方式没啥可说的，和之前一样，这里我们重点看下<Route render>的渲染方式：

// 行内渲染示例
<Route path="/home" render={() => <div>Home</div>}/>
 
// 包装/合成
const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    <FadeIn>
      <Component {...props}/>
    </FadeIn>
  )}/>
)
 
<FadingRoute path="/cool" component={Something}/>

TIPS: 第三坑！ <Route component>的优先级要比<Route render>高，所以不要在同一个<Route>中同时使用这两个属性。

<Link>

和之前版本没太大区别，重点看下组件属性：

• to（string/object）：要跳转的路径或地址；
• replace（bool）：为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址；为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false；

示例如下：

// Link组件示例
 
// to为string
<Link to="/about">关于</Link>
 
// to为obj
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>
 
// replace
<Link to="/courses" replace />

<NavLink>

<NavLink>是<Link> 的一个特定版本, 会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数，组件属性：

• activeClassName（string）：设置选中样式，默认值为 active；
• activeStyle（object）：当元素被选中时, 为此元素添加样式；
• exact（bool）：为 true 时, 只有当地址完全匹配 class 和 style 才会应用；
• strict（bool）：为 true 时，在确定位置是否与当前 URL 匹配时，将考虑位置 pathname 后的斜线；
• isActive（func）：判断链接是否激活的额外逻辑的功能；

从这里我们也可以看出，新版本的路由在组件化上面确实下了不少功夫，来看看NavLink的使用示例：

// activeClassName选中时样式为selected
<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>
 
// 选中时样式为activeStyle的样式设置
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>
 
// 当event id为奇数的时候，激活链接
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}
 
<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>

<Switch>

该组件用来渲染匹配地址的第一个<Route>或者<Redirect>。那么它与使用一堆route又有什么区别呢？

<Switch>的独特之处是独它仅仅渲染一个路由。相反地，每一个包含匹配地址(location)的<Route>都会被渲染。思考下面的代码：

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

如果现在的URL是/about，那么<About>, <User>, 还有<NoMatch>都会被渲染，因为它们都与路径(path)匹配。这种设计，允许我们以多种方式将多个<Route>组合到我们的应用程序中，例如侧栏(sidebars)，面包屑(breadcrumbs)，bootstrap tabs等等。 然而，偶尔我们只想选择一个<Route>来渲染。如果我们现在处于/about，我们也不希望匹配/:user（或者显示我们的 “404” 页面 ）。以下是使用 Switch 的方法来实现：

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

现在，如果我们处于/about，<Switch>将开始寻找匹配的<Route>。<Route path="/about"/> 将被匹配， <Switch>将停止寻找匹配并渲染<About>。同样，如果我们处于/michael，<User>将被渲染。

以上就是我对React Router v4 的初试，反正也是一边查文档，一边试水的，如有错误或疏漏，还请大家谅解并不吝指正！

 

作者：桂圆_noble
链接：https://www.jianshu.com/p/6a45e2dfc9d9
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。