React-Router V5

灰灰_Glory

于 2023-05-12 22:13:28 发布

阅读量139

点赞数

分类专栏：前端学习笔记文章标签： react.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_53207975/article/details/130650998

版权

前端学习笔记专栏收录该内容

11 篇文章

订阅专栏

React路由用于在单页应用中管理多个视图，通过Router、Route和Link组件实现页面间的导航。基本使用包括安装react-router-dom库，用Router包裹应用，Link作为导航菜单，Route配置路径和组件。编程式导航可通过history对象实现，如使用push方法跳转页面。默认路由和匹配模式（模糊匹配和精准匹配）也是路由配置的重要部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React路由基础

目标

能够说出React路由的作用
能够掌握-react-router-dom的基本使用
能够使用编程式导航跳转路由
能够知道React路由的匹配模式

React路由介绍

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

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

路由的基本使用

使用步骤

安装： yarn add react-router-dom
如果没有安装yarn工具的，需要先全局安装一下yarn：npm install -g yarn

导入路由的三个核心组件： Router / Route / Link

import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

使用Router 组件包裹整个应用

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

常用组件说明

**Router组件：**包裹整个应用，一个React应用只需要使用一次
- 两种常用的Router： HashRouter和BrowserRouter
- HashRouter：使用URL的哈希值实现（localhost:3000/#/first）
- 推荐 BrowserRouter：使用H5的history API实现（localhost3000/first）
**Link组件：**用于指定导航链接（a标签）
- 最终Link会编译成a标签，而to属性会被编译成 a标签的href属性
**Route组件：**指定路由展示组件相关信息
- path属性：路由规则，这里需要跟Link组件里面to属性的值一致
- component属性：展示的组件
- Route写在哪，渲染出来的组件就在哪