react-router详解

前言

作为 React 全家桶的一员，如果我们想要开发一个 React 应用，那么 react-router 基本上是我们绕不过去的基础。基于此，对它的了解和使用也是必不可少的一步

本文将重点介绍实际应用中常用的一些 API 以及实践过程中遇到的一些问题，目标很简单：会用

基于 react-router v5.0.1，WEB 应用程序

安装

国际惯例，首先我们需要安装

npm install --save react-router-dom 

从这一步开始，已经有同学有疑问了 我们明明在说 react-router 怎么要下载安装 react-router-dom 呢

React Router 现在已经被划分成了三个包：react-router，react-router-dom，react-router-native

react-router 为 React Router 应用提供了核心的路由组件和函数，另外两个包提供了特定环境的组件（浏览器和 react-native 对应的平台），不过他们也是将 react-router 导出的模块再次导出

因为我们需要开发一个 web 应用，所以直接安装 react-router-dom 就可以了

初体验

首先，让我们通过一个小小的示例来感知一下 react-router

import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom'

const Index = () => <div>Index页面</div>

const About = () => <div>About页面</div>

const App = () => {
    return (
        <BrowserRouter>
            <div>
                <div>
                    <ul>
                        <li><Link to='/'>Index</Link></li>
                        <li><Link to='/about'>About</Link></li>
                    </ul>
                </div>
                <div>
                    <Switch>
                        <Route path='/' exact component={Index}></Route>
                        <Route path=