react-router(v4) - 爱码网

开发单页应用, 首先绕不开的内容就是路由, react router v4 版本是最新的版本. 和之前的版本相比, 成熟了很多, 也简单了很多, 使用起来更加方便.

核心 component

react-router V4 可以用于 Web 和 Native. 这里主要讨论基于 Web 的应用.

react-router 有很多 Components, 但是只要掌握下面 3 个 Component 就可以管理好 react 应用的路由了.

Router component

Router 是整个应用的路由. 在 Web 应用中, 使用 BrowerRouter 来包装 App

<BrowserRouter>
  <App />
</BrowserRouter>

然后, 在 App component 中, 就可以使用 Route 来定义各个路由对应的 component

Route component

每个 Route 都是一个具体的路由, 对应一个具体的页面. Route 可以对应一个 Component, 也可以直接写个匿名的 render 函数.

Route 中最常用的属性就是 path, 也就是路由的地址, 除此之外, Route 最重要的作用是会将 { match, location, history } 3 个属性注入到对应的 Component 或者 render 函数中.

Link component

Link 是用来导航的, 也就是在不同 Route 之间切换就会用到 Link.

常用路由示例

示例工程

示例工程的创建采用 create-react-app 工具.

$ create-react-app route-test
$ cd route-test
$ yarn add react-router-dom

基本使用

修改工程中的 App.js 文件, 增加 route 的 sample

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import './App.css'

const Index = () => <h2>Home</h2>
const About = () => <h2>About</h2>
const Users = () => <h2>Users</h2>

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about/">About</Link>
              </li>
              <li>
                <Link to="/users/">Users</Link>
              </li>
            </ul>
          </nav>

          <Route path="/" exact component={Index} />
          <Route path="/about/" component={About} />
          <Route path="/users/" component={Users} />
        </div>
      </Router>
    )
  }
}

export default App

这个示例中, 就包含了 3 个常用组件 Router, Route 和 Link

路由参数

路由的参数可以加在 path 上, 下面的示例中, Users Component 可以通过注入的 match 来得到 URL 中的参数.

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import './App.css'

const Index = () => <h2>Home</h2>
const About = () => <h2>About</h2>
const Users = ({ match }) => (
  <h2>
    User is {match.params.name}, age: {match.params.age}
  </h2>
)

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about/">About</Link>
              </li>
              <li>
                <Link to="/users/test/16">Users</Link>
              </li>
            </ul>
          </nav>

          <Route path="/" exact component={Index} />
          <Route path="/about/" component={About} />
          <Route path="/users/:name/:age" component={Users} />
        </div>
      </Router>
    )
  }
}

export default App

query 参数

除了上面那种 RESTful 的参数方式, 也可以通过 query 来传递参数. 下例中, 通过 location.search 来获取 querystring, 至于解析 querystring, 已有很多现成的方法可以使用.

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import './App.css'

const Index = () => <h2>Home</h2>
const About = ({ match, location }) => (
  <h2>About's search string: {location.search}</h2>
)
const Users = ({ match }) => (
  <h2>
    User is {match.params.name}, age: {match.params.age}
  </h2>
)

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to={{ pathname: '/about/', search: '?name=test&age=16' }}>
                  About
                </Link>
              </li>
              <li>
                <Link to="/users/test/16">Users</Link>
              </li>
            </ul>
          </nav>

          <Route path="/" exact component={Index} />
          <Route path="/about/" component={About} />
          <Route path="/users/:name/:age" component={Users} />
        </div>
      </Router>
    )
  }
}

export default App

FAQ

在刚开始使用 react-router 时, 可能会有些疑问, 我整理了自己在使用中一些疑惑:

match 是如何注入到 Component 中的

match, location, history 这 3 个 object, 是由 Route Component 作为 props 注入到它的 render 方法, 或者 component={xxx} prop 对应的组件中的

match.path 和 match.url 有什么区别

match.path 是用来做匹配用的, 也就是在 Route 中使用的
match.url 是用来迁移页面用的, 也就是在 Link 中使用的

比如上面的例子中, 对于 /users

match.path 是 users:name/:age
match.url 是 /users/test/16

BrowserRouter 和 HashRouter 有什么区别

BrowserRouter 是用于和 Server 有交互的 Router
HashRouter 是用于静态文件服务的 Router

Route 和 Switch 的区别

当有多个 Route 并列时, 如果外层没有包裹 Switch, 那么匹配到的 Route 都会被 render, 如果有 Switch, 那么只会 render 第一个匹配上的 Route

Route 如果不设置 path, 则每次都会匹配成功

Link 和 NavLink 的区别

NavLink 是一种特殊的 Link, 它可以设置一些 active 时的样式.

路由信息和 redux 状态管理如何结合

路由信息本质上也是一种状态信息, 放不放在 redux 中来管理, 相信很多人都会纠结. 官方的建议是不要把路由的状态放在 redux 的 store 中来管理, 理由如下:

路由状态一般只有 Components 才关心, 不管放不放在 redux 中, Component 的代码不会有什么改变
大部分情况下, 路由跳转都是通过 Link, NavLink, Redirct 来完成, 如果需要通过代码, 或者异步 action 中来跳转, 可以通过传入 history 对象来完成.
路由变化一般不需要通过时间旅行(time travel, redux 的一个调试工具)来 debug.