前言


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

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

  1. 调用 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分为以下几个独立的部分:


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


安装与使用


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


# 全局安装create-react-app脚手架
npm install -g create-react-app
# 建立一个react项目
create-react-app react-router-demo
# 进入项目目录
cd react-router-demo
# 安装react-router-dom
npm install --save react-router-dom


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


import React, { Component } from 'react';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
/* 
** 此处定义的组件,应为业务逻辑中的容器(smart)组件;
** 可以通过如import Home from './containers/Home/Home'来引入;
** 为了快速展示demo,故简单定义了一下。
*/
const Home = () => (
  <div>我是主页</div>
)
const Content = () => (
  <div>我是内容</div>
)
const Log = () => (
  <div>我是日志</div>
)
const Nav = () => (
  <div>
    <Link to='/home'>
    主页
    </Link>
    <Link to='/content'>
    内容
    </Link>
    <Link to='/log'>
    日志
    </Link>
  </div>
)
class App extends Component {
  render() {
    return (
      <div className="App">
        <BrowserRouter>
          <Switch> 
            <Route component={Nav} path='/' exact />
            <Route component={Home} path='/home' />
            <Route component={Content} path='/content' />
            <Route component={Log} path='/log' />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;


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