前言

前端路由是一款 SPA 应用的核心概念之一，它通过监听 url 的改变，在不重载应用的情况下，渲染出不同的页面，目前主流的两种路由分别是：

  1. 利用 hashchange 事件来监听 url 的 hash 变化，其兼容性较好。

  2. 调用 history 的 H5 API（pushState, replaceState等）能够在不刷新页面的情况下改变 url，利用 popstate 事件可以监听到这种改变，兼容性略差，但是url风格可以与服务端基本保持一致，且可以隐性的传参，目前比较推荐用此类路由。具体原理可以参考相关文档。

React Router 是 react 官方推荐的一款路由库。它遵循 react 万物皆组件的理念，声明式（你不需要知道它怎么做，而只需要告诉它怎么做）地控制路由跳转并渲染出指定的页面，而不需要去重载整个应用。

React Router 简介

目前 React Router 已经更新至V4.x版本，本文也主要围绕此版本来做相关介绍，其他版本可参考官方文档：

React Router V4.x较之前版本做了较大的改动，其按单代码仓库模型（monorepo）来进行代码规划，打开它的 github 查看其 packages 目录，可以发现React Router分为以下几个独立的部分：

  • 核心部分 react-router

  • 绑定了 DOM 操作的 react-router-dom（常用于 web 应用）

  • 用在 React Native 上的 react-router-native（用于 native App）

  • 用于配置静态路由的 react-router-config

monorepo 的好处就是，你只需要按照自己的需求，用 npm 安装这四个中的一个即可。本文大部分示例使用的都是 react-router-dom，它与 react-router 的区别是多了很多 DOM 类组件（如 等）。

安装与使用

你可以使用 react 官方提供的脚手架 create-react-app 来快速启动一个 react 应用，并且安装 react-router，我们这里是构建 webapp，所以使用的 react-router-dom。

  1. # 全局安装create-react-app脚手架
  2. npm install -g create-react-app
  3. # 建立一个react项目
  4. create-react-app react-router-demo
  5. # 进入项目目录
  6. cd react-router-demo
  7. # 安装react-router-dom
  8. npm install --save react-router-dom

然后打开 ./src/App.js，修改其中代码为：

  1. import React, { Component } from 'react';
  2. import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
  3. /* 
  4. ** 此处定义的组件，应为业务逻辑中的容器（smart）组件；
  5. ** 可以通过如import Home from './containers/Home/Home'来引入；
  6. ** 为了快速展示demo，故简单定义了一下。
  7. */
  8. const Home = () => (
  9.   <div>我是主页</div>
  10. )
  11. const Content = () => (
  12.   <div>我是内容</div>
  13. )
  14. const Log = () => (
  15.   <div>我是日志</div>
  16. )
  17. const Nav = () => (
  18.   <div>
  19.     <Link to='/home'>
  20.     主页
  21.     </Link>
  22.     <Link to='/content'>
  23.     内容
  24.     </Link>
  25.     <Link to='/log'>
  26.     日志
  27.     </Link>
  28.   </div>
  29. )
  30. class App extends Component {
  31.   render() {
  32.     return (
  33.       <div className="App">
  34.         <BrowserRouter>
  35.           <Switch> 
  36.             <Route component={Nav} path='/' exact />
  37.             <Route component={Home} path='/home' />
  38.             <Route component={Content} path='/content' />
  39.             <Route component={Log} path='/log' />
  40.           </Switch>
  41.         </BrowserRouter>
  42.       </div>
  43.     );
  44.   }
  45. }
  47. export default App;

至此，一个简单的 demo 就生成了。具体代码可以查看 demo1。