React Router V4使用指南(精讲)

一、前端路由和后端路由

1)后端路由

多页应用中，一个URL对应一个HTML页面，一个Web应用包含很多HTML页面，在多页应用中，页面路由控制由服务器端负责，这种路由方式称为后端路由。

多页应用中,每次页面切换都需要向服务器发送一次请求，页面使用到的静态资源也需要重新加载，存在一定的浪费。而且，页面的整体刷新对用户体验也有影响，因为不同页面间往往存在共同的部分，例如导航栏、侧边栏等，页面整体刷新也会导致共用部分的刷新。

2)前端路由

在单面应用中，URL发生并不会向服务器发送新的请求，所以“逻辑页面”的路由只能由前端负责，这种路由方式称为前端路由。

目前，国内的搜索引擎大多对单页应用的SEO支持的不好，，对于 SEO 非常看重的 Web
应用(例如，企业官方网站，电商网站等)，一般还是会选择采用多页面应用。React 也并非只能用于开发单页面应用。

二、React Router 安装

这里使用的 React Router 的大版本号是 v4, 这也是目前最新版本。

React Router 包含3个库, react-router、react-router-dom、和 react-router-native。react-router 提供最基本的路由功能，实际使用，我们不会直接安装 react-router,而是根据应用运行的环境选择安装 react-router-dom(在浏览器中使用)或 react-router-native(在 react-native中使用)。react-router-dom 和 react-router-native 都依赖 react-router,所以在安装时， react-router 也会自动安装。

创建 Web应用，使用

npm install react-router-dom

创建 navtive 应用，使用

 npm install react-router-native

三、路由器

React Router 通过 Router 和 Route 两个组件完成路由功能。Router 可以理解成路由器，一个应用中需要一个 Router 实例，所有跌幅配置组件 Route 都定义为 Router 的子组件。在 Web应用中，我们一般会使用对 Router 进行包装的 BrowserRouter 或 HashRouter 两个组件 BrowserRouter使用 HTML5 的 history API（pushState、replaceState等）实现应用的 UI 和 URL 的同步。HashRouter 使用 URL 的 hash 实现应用的 UI 和 URL 同步。

BrowserRouter 创建的 URL 形式如下http://example./some/path

HashRouter 创建的 URL 形式如下 http://example./#/some/path

使用 BrowserRouter 时，一般还需要对服务器进行配置，让服务器能正确地处理所有可能的URL。例如，当浏览器发生 http://example./some/path 和 http://example./some/path2 两个请求时，服务器需要能返回正确的 HTML 页面（也就是单页面应用中唯一的 HTML 页面）

HashRouter 则不存在这个问题，因为 hash 部分的内容会被服务器自动忽略，真正有效的信息是 hash 前端的部分，而对于单页应用来说，这部分是固定的。

Router 会创建一个 history 对象，history 用来跟踪 URL, 当URL 发生变化时， Router,的后代组件会重新渲染。React Router 中提供的其他组件可以通过 context 获取 history 对象，这也隐含说明了 React Router 中其他组件必须作为 Router 组件后代使用。但 Router 中只能唯一的一个子元素，例如

// 正确
ReactDOM.render(
 (
 <BrowserRouter>
  <App />
 </BrowserRouter>),
 document.getElementById('root')
)
//错误，Router 中包含两个子元素
ReactDOM.render(
 (
  <BrowserRouter>
   <App1 />
   <App2 />
  </BrowserRouter>),
 document.getElementById('root')
)

四、路由器

Route 是 React Router中用于配置路由信息的组件，也是 React Router 中使用频率最高的组件。每当有一个组件需要根据 URL 决定是否渲染时，就需要创建一个 Route。

1) path

每个 Route 都需要定义一个 path 属性，当使用 BrowserRouter 时，path 用来描述这个Router匹配的 URL 的pathname;当使用 HashRouter时，path 用来描述这个 Route 匹配的 URL 的 hash。例如，使用 BrowserRouter 时，<Route path=''foo' /> 会匹配一个 pathname 以 foo 开始的 URL （如: http://example./foo）。当 URL 匹配一个 Route 时，这个 Route 中定义的组件就会被渲染出来。

2)match

当 URL 和 Route匹配时，Route 会创建一个 match 对象作为 props 中的一个 属性传递给被渲染的组件。这个对象包含以下4个属性。

（1）params: Route的 path 可以包含参数，例如 <Route path="/foo/:id" 包含一个参数 id。params就是用于从匹配的 URL 中解析出 path 中的参数，例如，当 URL = 'http://example.ocm/foo/1' 时，params= {id: 1}。

（2）isExact: 是一个布尔值，当 URL 完全匹时，值为 true; 当 URL 部分匹配时，值为 false.例如，当 path='/foo'、URL="http://example./foo" 时，是完全匹配; 当 URL="http://example./foo/1" 时，是部分匹配。

（3）path: Route 的 path 属性，构建嵌套路由时会使用到。

（4）url: URL 的匹配的方式

3)Route 渲染组件的方式

（1）ponent

ponent 的值是一个组件，当 URL 和 Route 匹配时，Component属性定义的组件就会被渲染。例如

<Route path='/foo' ponent={Foo} >

当 URL = "http://example./foo" 时，Foo组件会被渲染。

(2) render

render 的值是一个函数，这个函数返回一个 React 元素。这种方式方便地为待渲染的组件传递额外的属性。例如

<Route path='/foo' render={(props) => {
 <Foo {...props} data={extraProps} />
}}>
</Route>

Foo 组件接收了一个额外的 data 属性。

（3）children

children 的值也是一个函数，函数返回要渲染的 React 元素。 与前两种方式不同之处是，无论是否匹配成功， children 返回的组件都会被渲染。，当匹配不成功时，match 属性为 null。例如:

<Route path='/foo' render={(props) => {
 <div className={props.match ? 'active': ''}>
  <Foo {...props} data={extraProps} />
 </div>
}}>
</Route> 

  如果 Route 匹配当前 URL，待渲染元素的根节点 div 的 class 将设置成 active.

4）Switch 和 exact

当URL 和多个 Route 匹配时，这些 Route 都会执行渲染操作。如果只想让第一个匹配的 Route 沉浸，那么可以把这些 Route 包到一个 Switch 组件中。如果想让 URL 和 Route 完全匹配时，Route才渲染，那么可以使用 Route 的 exact 属性。Switch 和 exact 常常联合使用，用于应用首页的导航。例如

<Router>
 <Switch>
  <Route exact path='/' ponent={Home}/>
  <Route exact path='/posts' ponent={Posts} />
  <Route exact path='/:user' ponent={User} />
 </Switch>
</Router>

如果不使用 Switch,当 URL 的 pathname 为 "/posts" 时，<Route path='/posts' /> 和 <Route path=':user' /> 都会被匹配，但显然我们并不希望 <Route path=':user' /> 被匹配，实际上也没有用户名为 posts 的用户。如果不使用 exact， "/" "/posts" "/user1"等几乎所有 URL 都会匹配第一个 Route,又因为Switch 的存在，后面的两个 Route永远不会被匹配。使用 exact,保证 只有当 URL 的 pathname 为 '/'时，第一个Route才会匹配。

5）嵌套路由

嵌套路由是指在Route 渲染的组件内部定义新的 Route。例如，在上一个例子中，在 Posts 组件内再定义两个 Route:

const Posts = ({match}) => {
 return (
  <div>
   {/ 这里 match.url 等于 /posts