React@16.x（36）路由v5.x（1）简单介绍

目录

• 1，前言
• 2，相关知识点介绍
• • [2.1，react-router 和 react-router-dom 的关系](#2.1，react-router 和 react-router-dom 的关系)
  • 2.2，2种路由模式
  • • [2.2.1，Hash 哈希路由](#2.2.1，Hash 哈希路由)
    • [2.2.2，Borswer History 浏览器历史路由](#2.2.2，Borswer History 浏览器历史路由)
• [3，React 路由组件](#3，React 路由组件)
• • [3.1，Route 相关属性](#3.1，Route 相关属性)
  • • 3.1.1，`path`，匹配的路径
    • 3.1.2，`component`，匹配成功后显示的组件
    • 3.1.2，children
  • [3.2，Switch 组件](#3.2，Switch 组件)

1，前言

react-router 的最新稳定版，2024.6.16 目前是 v6.23.1，

• 2021.11.4，v6.0 正式发布。

• 2022.10.5，v5 版本进行了最后一次升级 v5.3.4。

接下来的文章，介绍的都是 v5 版本 的用法。

2，相关知识点介绍

2.1，react-router 和 react-router-dom 的关系

• react-router，是路由核心库，包含了路由相关的核心代码。
• react-router-dom ，封装了 react-router，并结合实际页面，实现了和页面路由相关的功能。

所以，一般的 web 应用，只需要安装 react-router-dom 即可。

2.2，2种路由模式

路由：根据不同的页面地址，展示不同的组件。

以 url：https://blog.csdn.net/nav/web?a=b#abc 为例，

路径 path：/nav/web

hash：abc

2.2.1，Hash 哈希路由

原理：当 url 中的 hash 值变化时，不会导致页面刷新。

2.2.2，Borswer History 浏览器历史路由

原理：利用 HTML5 新增的API，来实现改变 url 中的路径而不会刷新页面。

// 旧版已有 API（会刷新页面）
window.history.go()
window.history.back()
window.history.forward()

HTML5 新增API

• window.history.length
• window.history.replaceState()
• window.history.replaceState()

3，React 路由组件

举例：访问 http://localhost:5173/a 会渲染组件 A

import { BrowserRouter as Router, Route } from "react-router-dom";

function A() {
    return <h1>A组件</h1>;
}

export default function App() {
    return (
        <Router>
            <Route path="/a">
                <A />
            </Route>
        </Router>
    );
}

• BrowserRouter 是浏览器历史路由。
• HashRouter 是 hash 路由，需要访问 http://localhost:5173/#/a。

3.1，Route 相关属性

Route 组件可以写到任意位置，只需要保证它是 Router 组件的后代元素即可。

3.1.1，path，匹配的路径

<Route path="/a" sensitive>
   <A />
</Route>

默认情况下，对上面的路由来说，有3种情况都能匹配到，

• http://localhost:5173/a
• http://localhost:5173/A
• http://localhost:5173/a/b

1，可设置属性 sensitive 实现对大小写敏感。

<Route path="/a" sensitive>
   <A />
</Route>

此时，只能访问 http://localhost:5173/a 而不能访问 http://localhost:5173/A

2，可设置属性 exact 实现精确匹配，而不是只匹配初始目录。

<Route path="/a" exact>
   <A />
</Route>

此时，只能访问 http://localhost:5173/a 而不能访问 http://localhost:5173/a/b。

3，如果不写 path，会匹配任意路径。

<Route>
   <A />
</Route>

此时，所有路径都会访问到 A 组件。

4，path 可以是数组，则只要一个路径满足即可。

<Route path={["/a", "/c"]}>
   <A />
</Route>

3.1.2，component，匹配成功后显示的组件

<Route path="/a">
   <A />
</Route>

上面的方式可以显示匹配到的组件，使用 component 属性一样的效果：

<Route path="/a" component={A}></Route>

3.1.2，children

举例使用的就是 children，

<Route path="/a">
   <A />
</Route>

children 也可以是函数，此时无论是否匹配，一定会显示 children，并忽略 component 属性，

<Router>
   <Route path="/a" component={A}>
        {() => <h1 style={{ color: "red" }}>必定会看到的内容</h1>}
    </Route>
    <Route path="/b" component={B}></Route>
</Router>

此时访问 http://localhost:5173/b 除了会渲染 B 组件，也同时会渲染 h1 元素。

3.2，Switch 组件

不能再该组件中，使用除 Route 组件外的其他组件。

Switch 组件的子元素只能是 Route 组件，并且只会显示第一个匹配到的组件。

所以可将该组件中最后一个 Route 组件不设置 path 属性，来作为 404 页面。

作用：当匹配到第一个 Route 后，立即停止匹配。

举例：当访问 http://localhost:5173/a/b 时，因为默认只匹配根目录的原因，会同时渲染 AB 组件和 A 组件。

<Router>
    <Route path="/a/b" component={AB}></Route>
    <Route path="/a" component={A}></Route>
    <Route path="/b" component={B}></Route>
</Router>

使用 Switch 组件后，当访问 http://localhost:5173/a/b 时，只会渲染 AB 组件。

<Router>
    <Switch>
        <Route path="/a/b" component={AB}></Route>
        <Route path="/a" component={A}></Route>
        <Route path="/b" component={B}></Route>
    </Switch>
</Router>

调换顺序后，当访问 http://localhost:5173/a/b 时，只会渲染 A 组件。

<Router>
    <Switch>
        <Route path="/a" component={A}></Route>
		<Route path="/a/b" component={AB}></Route>
    </Switch>
</Router>

---

以上。