写这篇文章的时候，create-react-app发布了5.0.0版本，必须更新之后才能在全局状态下创建新react应用，只能老老实实更新。

继续看慕课网的视频，在好好的看了Redux之后，继续开始看React-Router。

React-Router有三个库分别是：

1. react-router，实现了路由的核心功能
2. react-router-dom，在react-router上的一层封装，用于在web中使用路由
3. react-router-native，在react-router上的封装，用于native移动开发

对于我们的Web应用，只需要安装react-router-dom，就会自动安装好前两个。

这个视频里讲的是React-Router 4，实际上目前的版本已经来到了6，而且6与4&5的API有所不同，这里就先跟着来学习4。来看一下React-Router中实现基础路由功能的各个组件。

基础组件 - Router

和React-Redux的Provider类似，在想要使用路由的地方，要在外部包裹一个<Router>组件，在React中，使用的是<BrowserRouter>和<HashRouter>，这两个可以看成是<Router>组件的具体实现，二者的区别在于，前者匹配URL路径，后者匹配#路径。

<BrowserRouter> 需要服务端支持

<BrowserRouter>的内部实现基于HTML5的history API。这里就不多说了，我最近买了一本深入理解React Router：从原理到实践(博文视点出品)里介绍的非常详尽。

<BrowserRouter>需要Web服务器额外配置，因为我们使用的是客户端路由，在切换URL的时候，正常情况下不会向服务器发送请求。但是如果直接在浏览器中输入URL的时候，这个时候就会有请求发送到服务端，如果服务端没有正常配置，那么就会出错。对于<BrowserRouter>来说，服务器一般都会配置无论什么URL都会返回相同的HTML(实际就是我们编写的index.html)，返回的HTML中有JS代码，Router会检查当前的URL，重新获取控制权并渲染页面，就像打开了新页面一样。

正常情况下，Web服务器会根据URL路径中寻找不同的资源，前端路由的URL实际上在后端没有对应的资源。如果不进行特定的配置，就会返回404错误。前后端分离的项目，一般Web服务器都会配置成只要访问域名之下的任意地址，统统都返回固定的index.html。

<HashRouter> 无需服务器支持

使用<HashRouter>之后，根路径都会带有浏览器hash符号#，在点击Link的时候，URL变化的部分仅仅是#号之后的部分。主要是为了兼容老版本的浏览器，为了不支持HTML5的浏览器所用。而且URL的现代方式，大家还是喜欢使用正常URL，而不是Hash方式。

实际上在<HashRouter>方式下，一般大家也会配置一样的Web后端。

基础组件 - Route

如果说前边的Router组件是路由器的话，Route组件就是一条条路由表，表示对应的链接应该发送到哪里去（渲染什么组件）。

为了说明这个组件，写一个最简单的例子如下：

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

export const Nav = () => (
    <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
    </ul>

);

export const Home = () => (
    <p>Home</p>
);

export const About = () => (
    <p>About</p>
);

export const Contact = () => (
    <p>Contact</p>
);

import './App.css';
import {BrowserRouter, Route} from "react-router-dom";
import {About, Contact, Home, Nav} from "./Nav";

function App() {
  return (
      <BrowserRouter>
        <div>
          <Nav/>
          <Route path="/" exact component={Home}/>
          <Route path="/about" exact component={About}/>
          <Route path="/contact" exact component={Contact}/>
        </div>
      </BrowserRouter>
  );
}

export default App;

这个例子里 ，先渲染了一个Nav组件，用于存放三个链接，这个链接使用到了下边会讲的Link组件。然后是三个Route组件，用于控制URL路径与对应渲染的组件之间的关系。

Route是非常核心的组件，之后来细细品味。