React-Router v4 学习

React-Router v4

1. 设计理念

React-Router v4 的核心思想是 “动态路由”,它是相对于 “静态路由” 提出的设计概念。

何为静态路由?在服务器端所有的路由都是在设计过程已经规划完成。在许多客户端框架中也遵循了上述思路,即在页面渲染之前先规划好路由,将路由导入到顶层的模块中。但这种理念在 React-Router 中不再适用,作者希望在学习 React-Router 之前放弃 “静态路由” 设计思路。

1.1. 动态路由

在 React-Router 中的所有设置都是组件,因此路由是随着应用的渲染被同时计算得到,而不是独立于应用之外。为了解释这个理念我们首先学习 React-Router 在应用中的使用,

  • 将 React-Router 的组件声明到应用顶层:

    import { BrowserRouter } from 'react-router-dom'
    
    ReactDOM.render((
      <BrowserRouter>
        <App/>
      </BrowserRouter>
    ), el)
    
  • 使用 link 组件指向相应的位置:

    const App = () => (
      <div>
        <nav>
          <Link to="/dashboard">Dashboard</Link>
        </nav>
      </div>
    )
    
  • 最后利用 Route 组件关联位置与显示 UI:

    const App = () => (
      <div>
        <nav>
          <Link to="/dashboard">Dashboard</Link>
        </nav>
        <div>
          <Route path="/dashboard" component={Dashboard}/>
        </div>
      </div>
    )
    

如果用户访问 /dashboard , Route 组件会将路由形式的对象 {match, location, history} 作为属性参数传给<Dashboard {...props}> 组件进行渲染,否则不会渲染。

到此为止,似乎与 “静态路由” 的概念没有区别,但是不要忘记 Route 是一个组件,这就意味着 Route 组件是否渲染和其中的 pathcomponent 都可以由父组件的状态或属性进行设置。

1.2. 嵌套路由

在动态路由中配置嵌套路由就好像 div 标签中嵌套一个 div , 因为 Route 就是一个组件标签。

const App = () => (
  <BrowserRouter>
    {/* 这里是 div 标签*/}
    <div>
      {/* 这里是 Route 组件标签*/}
      <Route path="/tacos" component={Tacos}/>
    </div>
  </BrowserRouter>
)

// 当 url 匹配 /tacos 时, 该组件被渲染
const Tacos  = ({ match }) => (
  // 这是嵌套的 div 标签
  <div>
    {/* 这是嵌套的 Route 组件标签,
        match.url 用以实现相对路径 */}
    <Route
      path={match.url + '/carnitas'}
      component={Carnitas}
    />
  </div>
)

1.3. 响应式路由

利用动态路由理念很容易在 React-Native 中实现响应式的布局。

const App = () => (
  <AppLayout>
    <Route path="/invoices" component={Invoices}/>
  </AppLayout>
)

const Invoices = () => (
  <Layout>

    {/* always show the nav */}
    <InvoicesNav/>

    <Media query={PRETTY_SMALL}>
      {screenIsSmall => screenIsSmall
        // small screen has no redirect
        ? <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
          </Switch>
        // large screen does!
        : <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
            <Redirect from="/invoices" to="/invoices/dashboard"/>
          </Switch>
      }
    </Media>
  </Layout>
)

2. 快速入门

首先给出官方的基础案例:

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

// 三个基础呈现组件

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

// 一个内嵌的组件

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic}/>
    <Route exact path={match.url} render={() => (
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)

// 首页组件

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)
export default BasicExample

随后分析上例给出的三个 React-Router 组件,分别是 <BrowserRouter><Route><Link>

2.1. <BrowserRouter>

这是一个路由管理器,使用 HTML5 的 history API (pushState, replaceState, popState) 同步访问 URL 和组件。具体声明如下:

import { BrowserRouter } from 'react-router-dom'

<BrowserRouter
  basename={optionalString}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}
>
  <App/>
</BrowserRouter>

2.1.1. basename: string

应用的根目录,如果你的应用只是整个服务中的子服务,仅适应于某个子目录,那么就应该设置这个参数。

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">

2.2. <Link>

该组件用以声明应用的链接(导航)

import { Link } from 'react-router-dom'

<Link to="/about">About</Link>

2.2.1. to: string || object

定义需要导航的路径。

<Link to="/courses"/>

<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

2.2.2. replace: bool

如果该选项设置为 true,当你点击链接时,会在 history 栈中取代当前的状态路径而不是添加一个新状态路径。

2.3. <Route>

这是 React-Router 中最重要的组件了,当请求的状态路径与该组件给出的 path 一致时,会渲染所对应的 UI 组件。

import { BrowserRouter as Router, Route } from 'react-router-dom'

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

在 <Route> 组件中有三种渲染方式:

  • <Route component>
  • <Route render>
  • <Route children>

每一种方式都会传入相同形式的路由属性 —— {match, location, history}

2.3.1. component

使用 component 渲染方式时,React 会自动将所对应的组件转化为 React 组件,因此如果所对应组件是内联函数形式,请使用 render 或 children 渲染方式,避免每次都生成新的 React 组件。

<Route path="/user/:username" component={User}/>

2.3.2. render: func

该方式取代了React 生成组件的过程,而是直接执行一个函数,此外还经常用于路由的打包。

// 直接执行函数
<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}/>

2.3.3. children: func

有时无论路径是否匹配都要渲染组件,这种情况下使用 children 渲染方式,它和 render 方式类似只是多了一个匹配过程。

<ul>
  <ListItemLink to="/somewhere"/>
  <ListItemLink to="/somewhere-else"/>
</ul>

const ListItemLink = ({ to, ...rest }) => (
  <Route path={to} children={({ match }) => (
    <li className={match ? 'active' : ''}>
      <Link to={to} {...rest}/>
    </li>
  )}/>
)

注意: component 和 render 方式都优先于 children 方式,因此无法在一个 <Route> 组件中同时使用。

2.3.4. path: string

一个符合正则的有效 URL 路径,当 Route 中没有 path 时,该路由总是匹配 。

<Route path="/users/:id" component={User}/>

2.3.5. exact: bool

完全匹配的选项。

<Route exact path="/one" component={About}/>

完全匹配的逻辑:

path location.pathname exact matches?
/one /one/two true no
/one /one/two false yes

2.4. history

<Route> 组件相关的还有三个对象,分别是 historymatchlocation。在这节中我们先来了解 history 这个可变对象。

history 是 React-Router 极少的依赖模块之一,它主要作用是在不同的环境下管理会话。经常会使用到的 history 有:

  • browser history:DOM 的具体应用,支持 HTML5 的 history API。
  • hash history:DOM 的具体应用,用以兼容老版本的浏览器。
  • memory history:在无 DOM 或测试环境下通过内存方式处理来实施,适合 React-Native。

和history 对象相关的主要属性和方法有:

  • length:history 栈中的状态路径个数。
  • action:当前的操作,字符串形式(PUSH, REPLACE, POP)
  • location:当前的状态路径。
    • pathname: URL 路径字段
    • search:URL 查询字段
    • hash:URL 的 hash 字段
    • state:路径的状态,只在 browser 和 memory history 中有效。
  • push(path, [state]):将状态路径压入 history 栈。
  • replace(path, [state]):替换当前的状态路径。
  • go(n):向前移动当前指针 n 次。
  • goBack()go(-1)
  • goForward()go(1)
  • block(prompt):暂时阻止导航(“您确定离开”)。

history 是可变的,因此状态路径的访问方式推荐使用 <Route> 的属性(props)里间接获取,而不是直接使用 history.location。这可以保证在 React 生存周期里能够获得正确的比较。

class Comp extends React.Component {
  componentWillReceiveProps(nextProps) {
    // 返回 true
    const locationChanged = nextProps.location !== this.props.location

    // 错误,总是 false,因为 history 是可变的。
    const locationChanged = nextProps.history.location !== this.props.history.location
  }
}

<Route component={Comp}/>

2.5. location

在本文中我一直称之为状态路径,意思很明显就是具有状态的路径。该对象的与 url 对应,其具体属性如下:

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere'
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

状态路径会在以下几个位置由 React-Router 给出:

  • Route component 由 this.props.location 给出
  • Route render({location}) => () 给出
  • Route children({location}) => () 给出
  • withRouter 由 this.props.location 给出

你也可以在这几个位置定义状态路径:

  • Link to
  • Redirect to
  • history.push
  • history.replace

状态路径中的状态可用于 UI 分支的显示等情景。你也可以通过 <Route><Switch> 组件传递状态路径,这在动画显示和延迟导航中非常有用。

2.6. match

match 对象用以描述 <Route path> 匹配 URL 的结果,其实就是 <Route> 组件的 state ,<Route> 组件根据 match 对象进行状态转换,主要的属性有:

  • params:键值对对象对应正则模式中的参数字段。
  • isExact:是否完全匹配。
  • path:匹配使用的正则模式。
  • url:所匹配的 URL 路径字段。

可以在下面位置访问该对象,意味着将 <Route> 的 state 传递为子组件的 props:

  • Route component 由 this.props.match 给出
  • Route render 由 ({match}) => () 给出
  • Route children 由 ({match}) => () 给出
  • withRouter 由 this.props.match 给出

如果路由中没有 path,将匹配所有路径, match 对象就是其父对象的 match。

3. API 查漏补缺

官方教程中给出了许多实例,如果了解了上述 API 大部分代码都能看懂,还有一些 API 主要是增强使用的,为程序员在编程中提供了更多选择和便利。

3.1. <Redirect>

执行 <Redirect> 将会使应用导航到一个新的位置,同时在 history 栈中新位置替换当前位置。因为是替换操作所以在 <Redirect> 中通常会使用状态路径,并在状态路径中记录当前位置,以实现回溯路径的操作。

import { Route, Redirect } from 'react-router'

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>

3.1.1. to: string || object

重定向的位置。

3.1.2. push: bool

该属性为 true 时,history 栈的操作不再是替换操作而是压入新的位置元素。

<Redirect push to="/somewhere/else"/>

3.1.3. from: string

表明从那个位置进行重定向操作的。该属性只有在 <Switch> 组件中才有效。实际上该属性就是 <Route> 组件中 path 属性的别称,与此同理还可以使用 exactstrictpath

<Switch>
  <Redirect from='/old-path' to='/new-path'/>
  <Route path='/new-path' component={Place}/>
</Switch>

3.2. <Switch>

组件和语法中的 switch 功能类似,执行第一个匹配的路由。这个逻辑很直观也就是排他性,主要解决使用多个 <Route> 时多个路由同时匹配的问题。

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

如果 URL 是 /about ,那么上述三个路由都匹配,此时希望只有第一个路由渲染,就需要使用 <Switch> 组件了:

import { Switch, Route } from 'react-router'

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

3.2.1. location: object

如果 <Switch> 组件中给出了 location 属性,子元素将不再与当前位置或 URL 进行匹配操作,而是与该属性进行匹配,并且匹配的子元素的 location 值将被覆盖为 <Switch> 的 location 属性值。

3.2.2. children: node

<Switch> 组件中子元素可以是 <Route><Redirect> 组件, <Route> 使用 path 属性进行匹配,而 <Redirect> 使用 from 属性进行匹配。

<Switch>
  <Route exact path="/" component={Home}/>

  <Route path="/users" component={Users}/>
  <Redirect from="/accounts" to="/users"/>

  <Route component={NoMatch}/>
</Switch>

3.3. <NavLink>

特殊的 <Link> 组件,主要作用是实现导航栏。

activeClassName: string

当链接激活时的类名,默认是 active

activeStyle: object

链接激活时的样式。

<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>

isActive: func

在链接匹配的基础上添加逻辑以决定是否该链接激活。

// only consider an event active if its event id is an odd number
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>

其他属性 exact, strict, location 参考 <Link>

推荐阅读更多精彩内容

  • 路由的作用:但页面应用(SPA)路由跳转:切换显示视图。 安装 使用 注意:如果使用strict,exact和st...
    StevenWongCN阅读 124评论 0 0
  • (掌握)简单说下setTimeout(fn, 0)中的0代表的是什么?如果我想在vue实现此功能可以用什么方法代替...
    BOOM_小志阅读 3,084评论 0 37
  • 场景:list页面(要缓存),跳转到details页面,需求:1 从details页面返回后 list页面不刷新,...
    无疆wj阅读 299评论 0 7
  • 经常做后台的小伙伴儿可能经常要遭遇各种表单结构,input,select,时间、日期插件等等,各种属性配置到吐,今...
    我的弟弟叫泥鳅阅读 332评论 0 9
  • 创建项目 首先更新vue-cli到最新版本。 项目变化 vue2.x和vue3.x目录结构没有什么变化,只是一些使...
    抽疯的稻草绳阅读 661评论 0 11