React 路由介绍

现代前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生

• 前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）
• 前端路由是一套映射规则，在 React 中，是 URL 与 组件 的对应关系
• 使用 React 路由简单来说，就是配置 路径 和 组件（配对）

路由的基本使用

使用步骤

1. 安装 react-router-dom

npm i react-router-dom

2. 导入路由的三个核心组件：Router、Route、Link

// 实际上用的是 BrowserRouter 用 as 关键字 起别名 Router
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

3. 使用 Router 组件包裹整个应用（重要）

<Router>
    <div className="App">

    </div>
</Router>

4. 使用 Link 组件作为导航菜单（路由入口）

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

5. 使用 Router 组件配置路由规则和要展示的组件（路由出口）

const First = () => <p>页面一的内容</p>
<Router>
    <div className="App">
        <Link to="/first">页面一</link>
        <Route path="/first" component={Fisrt}></Route>
        // or
        <Route path="/first" element={<Fisrt />}></Route>
    </div>
</Router>
// path 的值要和 Link 组件的 to 属性一致
// component 路由规则匹配时要展示的组件

v6 版本需要导入 Routes 组件，然后用 Routes 包裹 Route

常用组件说明

• Router 组件：包裹整个应用，一个 React 应用只需要使用一次

• 两种常用 Router：HasRouter 和 BrowserRouter

  • HashRouter：使用 URL 的哈希值实现（localhost:3000/#/first）
  • （推荐）BrowserRouter：使用 H5 的 history API 实现（localhost:3000/first）
• Link 组件：用于指定导航链接（a 标签）

// to属性：浏览器地址栏中的 pathname（location.pathname）
<Link to="/first">页面一</link>

• Route 组件：指定路由展示相关信息

// path 属性：路由规则
// component 属性：展示的组件
// Route 组件写在哪里，渲染出来的组件就展示在哪
<Route path="/first" component={Fisrt}></Route>

• NavLink 会动态的给路由链接追加 active 这个类

// 自定义 NavLink 组件的 active 类名
<NavLink activeClassName="自定义类名"  to="/about">About</NavLink>



// 封装 NavLink
// MyNavLink.jsx
import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'

export default class MyNavLink extends Component {
    render () {
        return (
            <NavLink activeClassName="" className="" {...this.props} />
        )
    }
}

// 使用 MyNavLink
<MyNavLink to="/about">About</MyNavLink>

• Switch 路由默认匹配成功后继续往下检索匹配，使用 Switch 包裹 Route 后匹配成功后就不在往下检索。v6版本 Switch 已被 Routes 标签代替
• Redirect 重定向，一般写在所有路由的最下方，当所有路由都无法匹配时，跳转到 Redirect 指定路由

v6路由 写法 <Route path="*" element={<Navigate to="/home" />} />

// 兜底 
<Redirect to="/about" />

其他

• history 对象
• match 对象
• withRouter 函数

解决多级路径刷新页面样式丢失问题

1. public/index.html 中引入样式时不写 ./ 写 /（常用）
2. public/index.html 中引入样式时不写 ./ 写 %PUBLIC_URL%（常用，只适用于 React 脚手架应用）
3. 使用 HasRouter

路由的执行过程

1. 点击 Link 组件（a 标签），修改了浏览器地址栏中的 url
2. React 路由监听到地址栏 url 的变化
3. React 路由内部遍历所有的 Route 组件，使用路由规则（path）与 pathname 进行匹配
4. 当路由规则（path）能够匹配地址栏中的 pathname 时，就展示该 Route 组件的内容

编程式导航

• 场景：点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现？
• 编程式导航：通过 JS 代码来实现页面跳转
• hisory 是 Route 路由提供的，用于获取浏览器历史记录的相关信息
• push(path)：跳转到某个页面，参数 path 比松要跳转的路径
• go(n)：前进或后退到某个页面，参数 n 标识前进或后退页面数量（比如：-1 表示后退到上一页）

class Login extends React.Component {
    handleLogin = () => {
    ...
    this.props.history.push('/home')
    }
    render () {...}
}

默认路由

可以使用 Redirect

• 问题：限制的路由都是点击导航菜单后展示的，如何在进入页面的时候就展示呢？
• 默认路由：表示进入页面就会匹配的路由
• 默认路由 path 为： /

<Route path="/" component={Home} />

匹配模式

模糊匹配模式

• 问题：当 Link 组件的 to 属性为 "/login" 时，为什么默认路由也被匹配成功了？
• 默认情况下，React 路由是模糊匹配模式
• 模糊匹配规则：只需要 pathname 以 path 开头就会匹配成功

<Link to="/login"> 登录页面</Link>
<Route path="/" component={Home}></Route> // 匹配成功

path 代表 Route 组件的 path 属性
pathname 代表 Link 组件的 to 属性（也就是 location.pathname）

精确匹配

• 问题：默认路由任何情况下都会展示，如何避免这种问题？
• 给 Route 组件添加 exact 属性，让其变为精确匹配模式
• 精确匹配：只要当前 path 和 pathname 完全匹配时才会展示该路由

// 此时，该组件只能匹配 pathname="/" 这一种情况
<Route exact path="/" component={Home} />

推荐给默认路由添加 exact 属性
路由组件放在 pages 文件夹内

精确匹配使用原则：精确匹配不要随便开启，需要开启，有些时候开启会导致无法继续匹配二级路由

嵌套路由

1. 注册子路由时要写上父路由的 path 值

2. 路由的匹配是按照注册路由的顺序进行的

   <NavLink to="/home/news">News</NavLink>
   <NavLink to="/home/news">News</NavLink>
   
   <Route path="/home/news" component={News}></Route>
   <Route path="/home/message" component={Message}></Route>
   <Redirect to="/home/news"></Redirect>

总结

1. React 路由可以有效的管理多个视图（组件）实现 SPA
2. React 组件包裹整个应用，只需要使用一次
3. Link 组件是入口，Route 组件是出口
4. 通过 props.history 实现编程式导航

5. 默认模糊匹配，添加 exact 变精确匹配

   React 路由的一切都是组件，可以像思考组件一样思考路由