React Router 学习手册(基础篇) - 24小时 - 剑客 -「科技引领未来」

React Router 学习手册(基础篇)

该手册是基于 react-router 和 React Router 使用教程 学习编写而成,可能会有描述不够清楚的地方,大家可自行参考原文,

该手册是基于 react-router

React Router 使用教程

学习编写而成,可能会有描述不够清楚的地方,大家可自行参考原文,

React Router

React

提供了一个完整的路由库,它允许你通过 URl

的变化来控制组件的切换与变化

安装

使用 npm

进行安装:

npm install --save react-router

之后在需要用到的地方进行引用,

// 需要用到 ES6 编译器,比如 babel

import { Router, Route, Link } from 'react-router'

// 不需要使用编译器

var Router = require('react-router').Router

var Route = require('react-router').Route

var Link = require('react-router').Link

当然也可以使用 script

标签进行引用:

<script src="https://unpkg.com/react-router/umd/ReactRouter.min.js"></script>

之后可以通过 window.ReactRouter

进行调用

概述

样例概述

当我们想要实现类似信息系统的界面,进入到收件箱选择查看具体信息 1234

的时候,界面路由如下:

path: /inbox/messages/1234

+---------+------------+------------------------+

| About | Inbox | |

+---------+ +------------------------+

| Compose Reply Reply All Archive |

+-----------------------------------------------+

|Movie tomorrow| |

+--------------+ Subject: TPS Report |

|TPS Report From: boss@big.co |

+--------------+ |

|New Pull Reque| So ... |

+--------------+ |

|... | |

+--------------+--------------------------------+

应该实现以下几种路由:

URLComponents

/

App -> Home

/about

App -> About

/inbox

App -> Indox

/inbox/messages/:id

App -> Inbox -> Message

使用 react-router

进行实现

// 省略部分组件定义

const App = React.createClass({

render() {

return (

<div>

<h1>App</h1>

{/* 使用 `<Link>` 标签进行路由跳转 */}

<ul>

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

<li><Link to="/inbox">Inbox</Link></li>

</ul>

{this.props.children}

</div>

)

}

})

const About = ...;

const Home = ...;

const Inbox = (props) => {

return (

<div>

<h2>Inbox</h2>

{props.children}

</div>

)

}

const IndexStatus = ...;

const Message = ...;

// <Router> 是一个 React 组件

// <Router> 同时也是 <Route> 的一个容器,路由规则使用 <Route> 进行定义

render((

<Router history={hasHistory}>

<Route path="/" component={App}>

{/*

当我们访问 `/` 的时候不会有加载任何子组件,组件 `<App>` 的 `this.props.children`为 `undefined`,

所以我们使用 `<IndexRoute>` 来指定默认加载的子组件

*/}

<IndexRoute compoent={Home} />

<Route path="about" component={About} />

<Route path="inbox" component={Inbox}>

<IndexRoute component={IndexStatus} />

{ /* 匹配 `/index/messages/123` 路由*/ }

<Route path="messages/:id" component={Message} />

{ /* 当然我们可以直接匹配 `messages/123`,但不破坏路由组件结构 */}

<Route component={Inbox}>

<Route path="messages/:id" component={Message} />

</Route>

</Route>

</Route>

</Router>

), document.body)

Route 详解

一个路由由三个属性来决定它是否能匹配上 URL

:

  • 嵌套结构

  • Path

    属性

  • 优先级

嵌套

当一个 URL

被调用,React Router 允许你通过嵌套路由 (Nested routes) 的方式来声明将要被渲染的一系列嵌套组件,嵌套路由是类树状结构 (tree-like structure),React Router 通过 route config

的顺序去匹配 URL

RouteConfig

是 React Router 内部用来指定 router 顺序的数组

<Router history={hashHistory}>

<Route path="/" component={App}>

<Route path="/repos" component={Repos}/>

<Route path="/about" component={About}/>

</Route>

</Router>

Path

语法

  • :paramName

    ,匹配 URL

    的一个部分,直到遇到下一个/、?、#

  • ()

    ,表示URL的这个部分是可选的

  • *

    ,匹配任意字符(非贪婪模式),直到模式里面的下一个字符为

  • **

    ,匹配任意字符(贪婪模式),直到下一个/、?、#为止

贪婪模式:在整个表达式匹配成功的前提下,尽可能少的匹配

非贪婪模式:在整个表达式匹配成功的前提下,尽可能多的匹配

<Route path="/hello/:name">         // 匹配 /hello/michael 和 /hello/ryan

<Route path="/hello(/:name)"> // 匹配 /hello, /hello/michael, 和 /hello/ryan

<Route path="/files/*.*"> // 匹配 /files/hello.jpg 和 /files/hello.html

<Route path="/**/*.jpg"> // 匹配 /files/hello.jpg 和 /files/path/to/file.jpg

优先级

React Router 是通过从上到下的顺序匹配路由的,所以应该尽量保证同级路由的第一个路由不会匹配上所有可能的 Path

,例如:

<Route path="/comments" ... />  

<Redirect from="/comments" ... /> // 这一条路由规则是不会执行的,以为上一条路由已经匹配了所有路径为 `/comments`

Histories

React Router 构建于 history

,简而言之,React Router history

属性用于监听浏览器地址栏的变化,

并将 URL

解析后放入进 location

对象中,给 React Router 提供匹配,

我们使用如下方式从 React Router Package 中引用,

import { browserHistory } from 'react-router'

然后在 <Router>

中使用,

render(

<Router history={browserHistory} routes={routes} />,

document.getElementById('app')

)

有三种 history

属性类型:

browserHistory

Browser history 是通过 URL

变化来改变路由的,它是背后调用的是浏览器的 History

但是,使用 Browser history 是需要 配置你的服务器

hashHistory

Hash history 使用哈希符 ( #

) 作为 URL

的一部分,路由通过哈希符的部分进行切换, URL

的形式类似于, example.com/#/some/path

我该使用 hashHistory

么?

Hash history 不需要你配置服务器即可使用,当你刚刚开始使用 React Router 的时候,就是用它吧,但是一般来说,生产环境下的 web 应用应该使用 browserHistory

来保持 URLs

的整洁度,并且 hashHistory

是不支持服务端渲染的

实际使用当中,我们会发现具体的 URL

可能为 example.com/#/some/path?_k=ckuvup

所以

?_k=ckuvup

是垃圾代码什么

当我们使用 web 应用的时候,浏览器记录 (history) 通过 push

或者 replace

来产生变换,浏览器记录会存储一个地址状态 (location state),但并不会体现在 URL

中,

相关的 API 可以参考 History

而在 DOM API 中,改变 Hash history 的方式仅仅是通过 window.location.hash = newHash

,这并没有办法保存地址状态,但是我们希望所有的历史记录都能够使用地址状态,所以我们为每一个地址产生一个独一无二的键值用以表示地址状态,当我们在浏览器中点击后退或者前进的时候,我们就有办法来之前的地址状态了

createMemoryHistory

Memory history 并不会从地址栏中操作或是读取,它能够帮助我们完成服务器端的渲染,或者用于测试以及其他渲染环境 (比如 React Native),和其他两种方式不一样的是,我们需要在内存中创建 history

对象来使用,

const history = createMemoryHistory(loaction)

Index Routes and Index Links

Index Routes

考虑以下代码,

<Router>

<Route path="/" component={App}>

<Route path="accounts" component={Accounts}/>

<Route path="statements" component={Statements}/>

</Route>

</Router>

当我们访问 /

的时候不会有加载任何子组件,组件 <App>

this.props.children

undefined

当然你可以使用 {this.props.children || <Home />}

来定义渲染默认组件,

Home

并没有出现在路由当中,所以这样写并不是非常直观,因此可以使用 <IndexRoute>

来指定当指定子组件不存在时加载默认的子组件,

<Router>

<Route path="/" component={App}>

<IndexRoute component={Home}/>

<Route path="accounts" component={Accounts}/>

<Route path="statements" component={Statements}/>

</Route>

</Router>

Redirect and Index Redirects

我们可以使用 <Redirect>

组件来定义从一个路由自动跳转至另一个路由,

<Route path="inbox" component={Inbox}>

{/* 从 /inbox/messages/:id 跳转到 /messages/:id */}

<Redirect from="messages/:id" to="/messages/:id" />

</Route>

考虑以下代码,

<Route path="/" component={App}>

<Route path="welcome" component={Welcome} />

<Route path="about" component={About} />

</Route>

当我们希望访问 /

的时候自动跳转至 welcome

,即当我们访问跟路由 /

的时候从定向为其他组件,我们可以使用 <IndexRedirect>

组件,

<Route path="/" component={App}>

<IndexRedirect to="/welcome" />

<Route path="welcome" component={Welcome} />

<Route path="about" component={About} />

</Route>

Index Links

当我们想点击一个链接跳转至根路由 /

, 也许我们会这么写

<Link to="/">Home</Link>

实际上它会匹配任何以 /

开始的子路由,

当我们只希望渲染 Home

相关的组件, 我们应该这么写

<IndexLink to="/">Home</IndexLink>

Enter and Leave Hooks

路由组件 (Route) 都拥有 onEnter

onLeave

钩子,当一个路由被触发时,进入该路由时触发 onEnter

,离开该路由时触发 onLeave

,这两个钩子非常的有用,比如当进入一个路由时,需要先判断时候授权,就会可以使用 onEnter

在路由跳转过程中, onLeave

hook 会在所有将离开的路由中触发,从最下层的子路由开始直到最外层父路由结束,然后 onEnter

hook会从最外层的父路由开始直到最下层子路由结束,

回到概述中的例子,如果我们的路由从 /messages/5

跳转到 /about

,下面是这些 hook 的执行顺序:

  • /messages/:id

    onLeave

  • /inbox

    onLeave

  • /about

    onEnter

至此基础篇完结,之后我会给大家带来进阶篇,欢迎大家持续关注,

同时如果文章中有任何错误,欢迎大家指出,好的文章需要你的支持,谢谢

未登录用户
全部评论0
到底啦