--- theme: smartblue highlight: a11y-dark --- ## React Router `react-router`：路由核心库，包含诸多和路由功能相关的核心代码 `react-router-dom`：利用核心库 (它依赖 `react-router`)，结合实际的页面，实现跟页面路由相关的功能所以我们一般都安装使用 `react-router-dom` 库 ### 路由的两种模式我们都知道，url 地址 (如：`https://www.suressk.com:443/article?uid=sures&id=1008#hash`) 由以下几部分组成： 1. 网络协议 (`schema`)：`https` (`http` / `https` / `file`等) 2. 主机名 (`host`)：`www.suressk.com` (一般有 `ip 地址`，`域名`，`预设值(如 localhost)`，`局域网中的电脑名`等) 3. 端口号 (`port`)：`443` (`http 默认 80`，`https 默认 443`) 4. 访问路径 (`path`)：`/article` 5. 查询参数 (`query` / `search`)：`?uid=sures&id=1008` 6. 哈希 (`hash` / `锚点`)：`#hash` #### Hash Router 根据 `url` 地址中的 `hash` 值来确定显示的组件 > 因为 `hash` 值变化不会导致页面刷新
> 它的兼容性比较好，老版浏览器也支持 #### Browser History Router `HTML5` 出现后，新增 `History API`，从而使浏览器拥有了改变路径而不刷新页面的能力。`History` 表示浏览器的历史记录，它使用栈的方式存储，当我们每访问一个路径，它会将这个栈中加入一条路径记录 **`window.history`：** 1. `history.length`：获取当前 `tab页` 历史记录条数 2. `history.pushState(data, title, url)`：向当前历史记录栈中加入一条新记录 - `data`：附加的数据信息 - `title`：页面标题 (大部分浏览器不支持) - `url`：新的路径地址 3. `history.replaceState(data, title, url)`：替换历史记录栈当前的历史记录从而，我们可以根据路径来决定渲染哪个组件 ### 路由组件 `react-router` 为我们提供了两个重要组件：`Router` 和 `Route` 以及一些其他的组件 #### Router 组件它本身不做任何展示，仅提供路由模式配置；此组件会产生一个上下文，上下文会提供一些实用的对象和方法，`react-router-dom` 提供下面两个组件： 1. `HashRouter`：使用 `hash 模式` 匹配 2. `BrowserRouter`：使用 `BrowserHistory 模式` 匹配 3. ~~`MemoryRouter`：将 url 的历史记录保存在内存中 (不读取或写入地址栏)，一般用于 `非浏览器环境` (如：`React Native`)~~ (这里不讨论) 通常情况下，仅使用一个 `Router` 组件，而且用它来包裹整个页面 #### Route 组件根据不同的地址，展示不同的组件，它有两个重要属性：`path` 和 `component`： 1. `path`：匹配的路径规则 (`涉及后面说到的 "动态路径"`)，它也可以是一个 `路径正则数组` - 默认是不区分大小写的 (可以配合设置 `sensitive 属性为 true`，使路径匹配 `区分大小写`) - 默认是模糊匹配，只要路径存在，则认为匹配成功 (可以配合设置 `exact 属性为 true` 来精确匹配) - 如果不设置 `path`，则匹配任意路径 2. `component`：路径匹配成功后需显示的组件 3. `Route` 的 `children (子元素)`： - 传递 `React 元素`，无论路径是否成功匹配，只要经过对此 `Route 组件` 的匹配，那么一定会显示 `children`，且会 `忽略 Route 组件的 component 属性` - 传递一个函数，该函数有多个参数 (来自 Router 组件产生的上下文)，改函数返回 React 元素，则一定会显示返回的元素，且会 `忽略 Route 组件的 component 属性` 4. `exact` 属性：精确匹配 5. `sensitive` 属性：路径匹配 `区分大小写` 6. `strict` 属性：`Boolean` 是否严格匹配路径的最后一个斜杠 (为 `true` 时，`to="/a"`，而访问路径为 `"/a/"` 则匹配失败) ```jsx import React from 'react' import {BrowserRouter as Router, Route} from 'react-router-dom' function CompA() { return

CompA

} function CompB() { return

CompB

} function CompC() { return

CompC

} export default function App() { return (

Route Children Prop

) } ``` **`Route` 组件可以写在任意位置，只要保证它是 `Router` 组件的后代元素即可** #### withRouter 高阶函数比如说有这么个使用场景，`CompB` 组件并不是 `Route` 组件匹配显示的组件，而是其匹配组件的后代组件，但也需要使用 `history`，`location`，`match` 对象信息： ```jsx import React from 'react' import {BrowserRouter as Router, Route} from 'react-router-dom' function CompA() { return

CompA

} function CompB() { /* 这里是拿不到 Route 组件注入的 history, location, match 对象信息的 */ return

CompB

} export default function App() { return ( ) } ``` 所以，我们需要使用 `withRouter` 这个高阶函数来包装 `CompB` 组件，它内部会拿到 `Router` 组件创建的上下文，并将其作为属性传递给返回的新组件：`const RouteCompB = withRouter(CompB)`，这样在 `CompB` 组件内部就能使用 `history`，`location`，`match` 对象的信息了 #### Switch 组件它会依次进行路径匹配，若路径匹配成功，则不会继续往后匹配 (不加此组件的默认情况下会将 `Route` 组件的路径全部进行匹配渲染) 由于 `Switch` 组件会循环所有的子元素 (`按照书写 Route 组件` 的顺序去依次匹配)，若匹配成功，则渲染对应的组件，停止循环；因此，`Switch` 子组件不能是 `Route` 和 `Redirect` 组件以外的其他组件 ```jsx // 比如，用法如下： import React, { memo } from 'react' import {BrowserRouter as Router, Route, Switch} from 'react-router-dom' function CompA() { return

CompA

} function CompB() { return

CompB

} function CompC() { return

CompC

} function Task() { return (

Route Children Prop

) } export default memo(Task) ``` 这个示例，当我们访问本地 server 地址 `/a/b` 路径时，你会发现页面渲染的内容是：`CompB`，虽然 `/a` 路径展示 `红色 Route Children Prop` 也满足路径匹配，但 `Switch组件` 匹配显示 `CompB组件` 后就停止了 #### Link 组件生成一个无刷新作用的 `a 元素`， 1. `to` 属性： - 可以是一个字符串：`` / `` - 可以是一个包含 `pathname`，`search`，`hash`，`state` 四个属性的对象： ```jsx ``` - 可以是一个函数，内部返回字符串或对象 2. `replace` 属性：`Boolean`，表明当前 `Link 组件` 跳转是否采用替换模式 (默认 `push` 方式跳转) 3. `innerRef` 属性：用于获得 `Link` 组件实际渲染元素的 DOM 元素 - 函数：会将这个渲染元素的 DOM 元素作为这个函数的参数 - 对象：通过 `React.createRef()` 创建的 ref 对象 #### NavLink 组件它具备 `Link 组件` 的所有功能，还可以根据渲染元素的链接地址与当前浏览器访问路径进行匹配，为匹配上的元素添加一个 `active` 类名 (默认匹配上路径的类名) 1. `activeClassName` 属性：路径匹配成功时的选中类名 (替换默认的 `.active`) 2. `activeStyle` 属性：路径匹配成功的内联样式 3. `exact` 属性：`Boolean`，是否精确匹配 4. `sensitive` 属性：`Boolean`，路径匹配是否区分大小写 5. `strict` 属性：`Boolean`，是否严格匹配路径的最后一个斜杠 #### Redirect 组件重定向组件，当加载到该组件时，会无刷新地跳转页面 1. `to` 属性：重定向的路径 (`字符串` 或 `对象`) 2. `push` 属性：`Boolean`，默认 `false` (即按 `replace` 的模式重定向) 3. `from` 属性：当匹配到 `from` 的地址规则时，才进行重定向跳转 4. `exact` 属性：`Boolean`，`from` 是否精确匹配 5. `sensitive` 属性：`Boolean`，`from` 路径匹配是否区分大小写 6. `strict` 属性：`Boolean`，`from` 路径是否严格匹配的最后一个斜杠 ### 路由信息 `Router` 组件会创建一个 `Context`，并且会向 `Context` 中注入一些信息。这个 `Context` 对开发者是隐藏的，`Route` 组件匹配到了 `path`，`Route` 组件会将这些 `Context` 中的信息作为属性传递给对应的组件： #### history - `非 window.history` 对象，我们可以利用该对象进行无刷新跳转等操作 - `push(relativePath, data?)`：将某个新地址入栈 (历史记录栈)，第一个参数为跳转的相对路径；第二个参数即为跳转过去附加的状态数据 (后面可通过 `props.history.location.state` 获取，但这个状态数据依赖于跳转，若直接访问这个跳转的路径，状态数据就为空) - `replace(relativePath, data?)`：将某个新地址替换历史记录栈的当前记录 - `go()` / `forward()` / `back()`：用法与 `window.history` 中的同名方法一样 #### location - 与 `props.history.location` 是同一个对象，它里面记录了当前地址的相关信息 (`search` / `hash` / `pathname` / `state`)，我们通常会使用第三方库 [【**query-string**】](https://www.npmjs.com/package/query-string) 来解析参数数据 (`parse`)： - 如 `location.search`：`?a=1&b=2&c=3` 解析为 `{a: 1, b: 2, c: 3}` - 如 `location.hash`：`#d=4&e=5` 解析为 `{d: 4, e: 5}` #### match - 保存路由匹配的相关信息 - `isExact`：指当前路由路径与 `Route 组件` 配置的路径是否精确匹配，与 `Route 组件` 是否设置 `exact` 属性无关 - `params`：会根据 `Route 组件` 配置的动态参数，将地址栏参数对应位置的数据收集到这个对象中，如： - ``，访问路径是：`/news/2021/7`，那么 `params = {year: '2021', month: '7', day: undefined}` - ``，加入正则表达式 (年份是数字)，若访问路径是：`/news/2021/7`，那么 `params = {year: '2021', month: '7', day: undefined}`；若访问路径是：`/news/suressk/7`，则此路径匹配失败 - `path`：匹配上的路由路径使用的路径正则匹配规则 (如上面的示例：`"/news/:year(\d+)/:month?/:day?"`) - `url`：实际匹配上的路由路径 `react-router` 使用了 `path-to-regexp` 来解析路径正则字符串，将它解析转换成一个真正的正则表达式通常，向页面传递数据的方式有： 1. 使用 `state`：依赖于手动使用 `history 对象` 跳转时传递数据 2. 使用 `search`：在地址栏通过查询参数携带 `/news?year=2021&month=7&day=21` 3. 使用 `hash`：将数据加到地址栏的 hash 值后 `/news#year=2021&month=7&day=21` 4. 使用 `params`：将数据填写到 `路径` 中 `/news/2021/7/21` ### Hooks 如上面说到 `withRouter` 高阶函数时，我们需要在某些 `Route` 匹配到的组件内部使用相关对象或信息，我们就需要使用高阶组件去包一层来通过属性获取，但我们可能只需要使用这其中的某一个对象，那么就可以 `在函数组件中` 使用以下 `Hooks`： #### useHistory ```jsx import { useHistory } from "react-router-dom" function HomeButton() { const history = useHistory() // 获取到 history 对象 const handleClick = useCallback(() => { history.push("/") }, [history]) return ( ) } ``` #### useLocation ```jsx import { useLocation } from "react-router-dom" function HomeButton() { const location = useLocation() // 获取到 location 对象 // other code... return (<> {/* anything... */} ) } ``` #### useParams ```jsx import {BrowserRouter as Router, Route, Switch, useParams} from "react-router-dom" function ArticleDetail(){ const {uid} = useParams() // 获取到路径匹配的 params 对象 => 路径参数 uid return

The article uid is "{uid}"

} function App() { // other code... return ( ) } ```