React@16.x(36)路由v5.x(1)简单介绍

目录

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 中的路径而不会刷新页面。

js 复制代码
// 旧版已有 API(会刷新页面)
window.history.go()
window.history.back()
window.history.forward()

HTML5 新增API

3,React 路由组件

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

js 复制代码
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,匹配的路径

html 复制代码
<Route path="/a" sensitive>
   <A />
</Route>

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

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

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

html 复制代码
<Route path="/a" sensitive>
   <A />
</Route>

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

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

html 复制代码
<Route path="/a" exact>
   <A />
</Route>

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

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

html 复制代码
<Route>
   <A />
</Route>

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

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

html 复制代码
<Route path={["/a", "/c"]}>
   <A />
</Route>

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

html 复制代码
<Route path="/a">
   <A />
</Route>

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

html 复制代码
<Route path="/a" component={A}></Route>

3.1.2,children

举例使用的就是 children

html 复制代码
<Route path="/a">
   <A />
</Route>

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

html 复制代码
<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 组件。

html 复制代码
<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 组件。

html 复制代码
<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 组件。

html 复制代码
<Router>
    <Switch>
        <Route path="/a" component={A}></Route>
		<Route path="/a/b" component={AB}></Route>
    </Switch>
</Router>

以上。

相关推荐
挽淚几秒前
JavaScript 数组详解:从入门到精通
javascript
言兴1 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte5 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常6 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常8 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101812 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
南篱13 分钟前
JavaScript 中的 this 关键字:从迷惑到精通
javascript
Struggler28119 分钟前
Chrome插件开发
前端
前端 贾公子31 分钟前
Monorepo + vite 怎么热更新
前端
coding随想40 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript