六十天前端强化训练之第二十天React Router 基础详解

news2025/3/17 1:34:51

=====欢迎来到编程星辰海的博客讲解======

看完可以给一个免费的三连吗,谢谢大佬!

目录

一、核心概念

1.1 核心组件

1.2 路由模式对比

二、核心代码示例

2.1 基础路由配置

2.2 动态路由示例

2.3 嵌套路由实现

2.4 完整示例代码

三、关键功能实现效果

四、学习要点总结

4.1 核心概念

4.2 最佳实践

4.3 常见问题

五、扩展阅读推荐

5.1 官方资源

5.2 优质文章

5.3 视频教程

六、实践案例:电商网站路由设计


一、核心概念

React Router 是 React 生态中最流行的路由解决方案,提供声明式的路由配置和导航功能,包含三个核心包:

  1. react-router:路由核心库
  2. react-router-dom:Web 专用路由库
  3. react-router-native:React Native 专用路由

1.1 核心组件

组件作用描述重要属性
<BrowserRouter>HTML5 history 模式路由容器basename
<Routes>路由匹配容器组件-
<Route>定义路由映射规则path, element
<Link>声明式导航组件to, state
<NavLink>带激活状态的 LinkclassName, style
<Navigate>编程式导航组件to, replace
<Outlet>嵌套路由占位符-

1.2 路由模式对比

JAVASCRIPT

// 1. BrowserRouter(推荐)
https://example.com/about

// 2. HashRouter(兼容旧浏览器)
https://example.com/#/about

二、核心代码示例

2.1 基础路由配置

JSX

// App.js
import { 
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from 'react-router-dom';

// 页面组件
function Home() { return <h2>首页</h2> }
function About() { return <h2>关于我们</h2> }

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

2.2 动态路由示例

JSX

// 产品详情页
function ProductDetail() {
  const { id } = useParams();
  return <h2>产品ID: {id}</h2>;
}

// 路由配置
<Routes>
  <Route path="/products/:id" element={<ProductDetail />} />
</Routes>

2.3 嵌套路由实现

JSX

// 用户模块布局
function UserLayout() {
  return (
    <div>
      <h3>用户中心</h3>
      <Outlet />  {/* 子路由渲染位置 */}
    </div>
  );
}

// 路由配置
<Route path="/user" element={<UserLayout />}>
  <Route index element={<Dashboard />} />
  <Route path="profile" element={<Profile />} />
  <Route path="orders" element={<OrderList />} />
</Route>

2.4 完整示例代码

JSX

import React from 'react';
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  useParams,
  Navigate
} from 'react-router-dom';

// 页面组件
function Home() { return <h2>首页</h2> }
function About() { return <h2>关于我们</h2> }
function ProductList() {
  return (
    <div>
      <h2>产品列表</h2>
      <ul>
        {[1,2,3].map(id => (
          <li key={id}>
            <Link to={`/products/${id}`}>产品{id}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}
function ProductDetail() {
  const { id } = useParams();
  return <h2>产品详情:{id}</h2>;
}
function NotFound() { return <h2>404 页面不存在</h2> }

function App() {
  return (
    <BrowserRouter>
      <nav style={{ padding: 20, background: '#eee' }}>
        <Link to="/" style={{ marginRight: 20 }}>首页</Link>
        <Link to="/about" style={{ marginRight: 20 }}>关于</Link>
        <Link to="/products">产品中心</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/products" element={<ProductList />} />
        <Route path="/products/:id" element={<ProductDetail />} />
        <Route path="/old-about" element={<Navigate to="/about" replace />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

三、关键功能实现效果

这里我还存在问题,先给大家放大概图看看,到时候我还要再试试

[首页] [关于] [产品] [用户中心] [错误链接]
🏠 首页
欢迎来到网站主页
OR
📦 产品列表
• 产品 A
• 产品 B
• 产品 C
OR
👤 用户中心
[仪表盘] [个人资料]
📊 用户仪表盘
OR
⛔ 404 页面未找到
请检查您访问的URL是否正确
  1. 基础导航切换
  2. 动态路由参数展示
  3. 嵌套路由层级显示
  4. 编程式导航跳转
  5. 404页面处理

四、学习要点总结

4.1 核心概念

  1. 路由配置必须包裹在<BrowserRouter>
  2. <Routes>自动选择最佳匹配路由
  3. element属性接收React组件(v6新特性)
  4. 动态参数使用:paramName语法
  5. 索引路由使用index属性标记

4.2 最佳实践

  1. 使用<Link>代替<a>标签避免页面刷新
  2. 嵌套路由配合<Outlet>实现布局复用
  3. useNavigate实现编程式导航
  4. useLocation获取路由状态信息
  5. loaderaction处理数据加载(v6.4+)

4.3 常见问题

JAVASCRIPT

// 错误:直接使用<a>标签
<a href="/about">关于</a> ❌

// 正确:使用Link组件
<Link to="/about">关于</Link> ✅

// 路由匹配优先级问题
<Route path="users/:id" />
<Route path="users/new" /> ❌ 顺序错误

// 正确顺序
<Route path="users/new" />
<Route path="users/:id" /> ✅

五、扩展阅读推荐

5.1 官方资源

  1. React Router 官方文档
  2. GitHub 仓库
  3. 官方示例集合

5.2 优质文章

  1. React Router v6 完全指南
  2. 深度解析路由鉴权方案
  3. 路由懒加载最佳实践

5.3 视频教程

  1. React Router v6 官方教学视频
  2. 全栈路由配置指南
  3. 实战电商网站路由设计

六、实践案例:电商网站路由设计

JSX

// routes.js
const routes = [
  {
    path: '/',
    element: <MainLayout />,
    children: [
      { index: true, element: <HomePage /> },
      { path: 'products', element: <ProductListPage /> },
      { path: 'products/:slug', element: <ProductDetailPage /> },
      { path: 'cart', element: <CartPage /> },
      { 
        path: 'dashboard',
        element: <RequireAuth><DashboardLayout /></RequireAuth>,
        children: [
          { index: true, element: <OrderHistory /> },
          { path: 'settings', element: <AccountSettings /> }
        ]
      },
      { path: '*', element: <NotFoundPage /> }
    ]
  }
];

// 路由守卫组件
function RequireAuth({ children }) {
  const auth = useAuth();
  const location = useLocation();
  
  if (!auth.user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  
  return children;
}

通过本教程,大家可以掌握React Router的核心用法,建议结合官方文档和实际项目进行实践练习。路由配置需特别注意组件层级和匹配顺序,动态路由参数处理要考虑边界情况,嵌套路由是实现复杂布局的利器。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2316334.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

用 DeepSeek 构建 Vue.js 底层架构:高效协作与问题解决实践

文章目录 1. **DeepSeek 与 Vue.js 的完美协作**2. **问题背景**3. **问题分析与解决**3.1 **动态路由未正确生成**3.2 **路由路径配置错误**3.3 **路由嵌套问题**3.4 **通配符路由未配置** 4. **DeepSeek 的核心价值** 在现代前端开发中&#xff0c;Vue.js 以其简洁的语法和灵…

深入探讨RAID 5的性能与容错能力:实验与分析(磁盘阵列)

前言—— 本实验旨在探讨 RAID 5 的性能和容错能力。通过创建 RAID 5 阵列并进行一系列读写性能测试及故障模拟&#xff0c;我们将观察 RAID 5 在数据冗余和故障恢复方面的表现&#xff0c;以验证其在实际应用中的可靠性和效率。 首先说明&#xff1a;最少三块硬盘, 使用 4 块…

蓝桥杯备赛-二分-技能升级

问题描述 小蓝最近正在玩一款 RPG 游戏。他的角色一共有 NN 个可以加攻击力的技能。 其中第 ii 个技能首次升级可以提升 AiAi​ 点攻击力, 以后每次升级增加的点数 都会减少 Bi。「AiBi⌉Bi​。「Bi​Ai​​⌉ (上取整) 次之后, 再升级该技能将不会改变攻击力。 现在小蓝可以…

电子招采软件系统,如何实现10年可追溯审计

一、在当前经济环境下&#xff0c;中小企业面临着巨大的生存压力&#xff0c;传统产业的数字化转型迫在眉睫。AI技术为企业的低成本高效发展提供了新机会&#xff0c;混合办公成为新常态&#xff0c;数据安全法的深入落实则进一步推动企业重视数据安全。区块链存证技术凭借独特…

Ubuntu从源代码编译安装QT

1. 下载源码 wget https://download.qt.io/official_releases/qt/5.15/5.15.2/single/qt-everywhere-src-5.15.2.tar.xz tar xf qt-everywhere-src-5.15.2.tar.xz cd qt-everywhere-src-5.15.22. 安装依赖库 sudo apt update sudo apt install build-essential libgl1-mesa-d…

X86 RouterOS 7.18 设置笔记七:不使用Upnp的映射方法

X86 j4125 4网口小主机折腾笔记五&#xff1a;PVE安装ROS RouterOS X86 RouterOS 7.18 设置笔记一&#xff1a;基础设置 X86 RouterOS 7.18 设置笔记二&#xff1a;网络基础设置(IPV4) X86 RouterOS 7.18 设置笔记三&#xff1a;防火墙设置(IPV4) X86 RouterOS 7.18 设置笔记四…

数字隔离器,如何提升储能系统的安全与效能?

随着全球对光伏、风电等可再生能源需求的持续增长&#xff0c;在全球能源转型的浪潮中&#xff0c;储能技术凭借着可平衡能源供需、提高能源利用效率等优势&#xff0c;已成为实现 “双碳” 目标的核心支撑。据国家能源局公布数据显示&#xff0c;截至2024年底&#xff0c;我国…

基于UniApp + Vue3开发的智能汉字转拼音工具

基于UniApp Vue3开发的智能汉字转拼音工具 项目简介 这是一个基于 UniApp Vue3 开发的智能汉字转拼音工具&#xff0c;前端使用 Vue3 构建界面&#xff0c;后端采用 Classic ASP 提供接口支持&#xff0c;通过 pinyin-pro 库实现精准的中文转拼音功能。本工具支持以下特性&…

PyTorch 深度学习实战(14):Deep Deterministic Policy Gradient (DDPG) 算法

在上一篇文章中&#xff0c;我们介绍了 Proximal Policy Optimization (PPO) 算法&#xff0c;并使用它解决了 CartPole 问题。本文将深入探讨 Deep Deterministic Policy Gradient (DDPG) 算法&#xff0c;这是一种用于连续动作空间的强化学习算法。我们将使用 PyTorch 实现 D…

Angular由一个bug说起之十四:SCSS @import 警告与解决⽅案

SCSS import 警告与解决⽅案 ⚠ 警告信息 在 SCSS 中&#xff0c;使⽤ import 可能会产⽣以下警告&#xff1a; Deprecation Warning: Sass import rules are deprecated and will be removed in Dart Sass 3.0.0. ? 为什么会有这个警告&#xff1f; Sass 官⽅已经废弃 imp…

PyTorch系列教程:基于LSTM构建情感分析模型

情感分析是一种强大的自然语言处理&#xff08;NLP&#xff09;技术&#xff0c;用于确定文本背后的情绪基调。它常用于理解客户对产品或服务的意见和反馈。本文将介绍如何使用PyTorch和长短期记忆网络&#xff08;LSTMs&#xff09;创建一个情感分析管道&#xff0c;LSTMs在处…

SEO新手基础优化三步法

内容概要 在网站优化的初始阶段&#xff0c;新手常因缺乏系统性认知而陷入技术细节的误区。本文以“三步法”为核心框架&#xff0c;系统梳理从关键词定位到内容布局、再到外链构建的完整优化链路。通过拆解搜索引擎工作原理&#xff0c;重点阐明基础操作中容易被忽视的底层逻…

Tcp网络通信的基本流程梳理

先来一张经典的流程图 接下介绍一下大概流程&#xff0c;各个函数的参数大家自己去了解加深一下印象 服务端流程 1.创建套接字&#xff1a;使用 socket 函数创建一个套接字&#xff0c;这个套接字后续会被用于监听客户端的连接请求。 需要注意的是&#xff0c;服务端一般有俩…

PHP函数缺陷详解

无问社区-官网&#xff1a;http://www.wwlib.cn 本期无人投稿&#xff0c;欢迎大家投稿&#xff0c;投稿可获得无问社区AI大模型的使用红包哦&#xff01; 无问社区&#xff1a;网安文章沉浸式免费看&#xff01; 无问AI大模型不懂的问题随意问&#xff01; 全网网安资源智…

深度学习GRU模型原理

一、介绍 门控循环单元&#xff08;Gated Recurrent Unit, GRU&#xff09; 是一种改进的循环神经网络&#xff08;RNN&#xff09;&#xff0c;专为解决传统RNN的长期依赖问题&#xff08;梯度消失/爆炸&#xff09;而设计。其核心是通过门控机制动态控制信息的流动。与LSTM相…

网络空间安全(31)安全巡检

一、定义与目的 定义&#xff1a; 安全巡检是指由专业人员或特定部门负责&#xff0c;对各类设施、设备、环境等进行全面或重点检查&#xff0c;及时发现潜在的安全隐患或问题。 目的&#xff1a; 预防事故发生&#xff1a;通过定期的安全巡检&#xff0c;及时发现并解决潜在的…

基于Python+SQLite实现(Web)验室设备管理系统

实验室设备管理系统 应用背景 为方便实验室进行设备管理&#xff0c;某大学拟开发实验室设备管理系统 来管理所有实验室里的各种设备。系统可实现管理员登录&#xff0c;查看现有的所有设备&#xff0c; 增加设备等功能。 开发环境 Mac OSPyCharm IDEPython3Flask&#xff…

面试系列|蚂蚁金服技术面【2】

今天继续分享一下蚂蚁金服的 Java 后端开发岗位真实社招面经&#xff0c;复盘面试过程中踩过的坑&#xff0c;整理面试过程中提到的知识点&#xff0c;希望能给正在准备面试的你一些参考和启发&#xff0c;希望对你有帮助&#xff0c;愿你能够获得心仪的 offer ! 第一轮面试完…

【JavaEE】网络原理之初识

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…

Vscode工具开发Vue+ts项目时vue文件ts语法报错-红波浪线等

Vscode工具开发Vuets项目时vue文件ts语法报错-红波浪线等 解决方案 问题如题描述&#xff0c;主要原因是开发工具使用的代码检查与项目的中的ts不一致导导致&#xff0c;解决办法&#xff0c;修改 vscode 中&#xff0c; 快捷键&#xff1a;command shift p, 输入&#xff…