React路由React路由路由的介绍现代的前端应用大多都是SPA(单页应用程序)，也就是只有一个HTML页面的应用

React路由

路由的介绍

现代的前端应用大多都是SPA(单页应用程序)，也就是只有一个HTML页面的应用程序。为了有效的使用单页面去管理原来的多页面的功能，前端路由应运而生。
前端路由的功能：让用户从一个视图(页面)导航到另一个视图(页面)
前端路由是一套映射规则，在React中，是URL路径与组件的对应关系
使用React路由简单来说，就是配置路径与组件(配对)

使用步骤

安装：yarn add react-router-dom
导入路由的三个核心组件：

    import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
    //用Router名字代替BrowserRouter组件方便写代码，实际是引入的BrowserRouter组件

用Router组件包裹整个应用(重要)

    <Router>
    <div className = "APP>
    //...这里是页面内容
    </div>
    </Router>

Link组件为导航菜单(路由入口)

    <Link to = "/first">页面一</Link>

Route组件配置路由规则和要展示的组件(路由出口)

    const First = () => <p>页面一的内容</p>
    <Router>
    <div className = "APP">
    <Link to = "/first">页面一</Link>
    <Route path = "/first" component = {First}></Route>
    //path表示路由的规则，去匹配对应的规则，component表示当这个属性匹配的时候要展示的组件
    //当点击页面一时就会将<First />组件展示出来
    </div>
    </Router>

常用组件说明

Router组件：包裹整个组件，一个Router应用只需要使用一次
Router两种常用：HashRoutere和BrowserRouter,没有什么区别，只是会在网址出现#号
Link组件：用于指定导航链接(a标签)
to属性：浏览器地址栏中的pathname(location.pathname)，也是href属性所对应的值

    <Link to = "/first">页面一</Link>
    //浏览器中显示如下：
    <a href = ”/first“>页面一</a>

Route组件：指定路由组件相关信息：
path属性：路由规则
component属性：展示的组件
Route组件写在哪，渲染出来的组件就展示在哪

编程式导航

默认路由

默认路由：表示进入页面是就会匹配的路由
默认路由就是path属性为：“/”

    <Route path = ”/“ component = {Home}>
    //页面一加载就会展示在页面上

匹配模式

模糊匹配模式
默认情况下，React路由是模糊匹配模式，只要pathname以path开头就会匹配成功，就是说只要Link组件中的to的值以path就能匹配成功，如默认路由都能匹配成，/first和/first能匹配成功，/first和/first/a也能匹配成功
精准匹配模式
给Route组件添加exact属性，让其变为精确匹配模式
精确匹配：只有当path和pathname完全匹配时从会展示该路由

    <Route exact path = "/" component = {First}>
    //只有当Link中to为”/“时才会展示First组件

嵌套路由

使用步骤