React Router 6的学习

安装react-router-dom

npm i react-router-dom

支持不同的路由创建

createBrowserRouter

特点

  1. 推荐使用的方式，基于 HTML5 的 History API。
  2. 支持用户友好的 URL，无需 #。
  3. 适用于生产环境的绝大多数场景。

适用

使用现代浏览器，支持 pushState 和 replaceState 的情况

应用

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from "../views/Home";
import About from "../views/About";
import ErrorPage from "../views/ErrorPage";const router = createBrowserRouter([{ path: "/", element: <Home /> },{ path: "/about", element: <About /> },{path: "*", // 404 页面element: <ErrorPage />,},
]);function App() {return <RouterProvider router={router} />;
}export default App;

tips

  1. 需要服务器支持，确保非根路径的页面请求被正确处理（常见问题是刷新后出现 404）
  2. 部署时，服务器通常需要配置以处理 SPA 应用

createHashRouter

特点

  1. URL 使用 #，如 http://example.com/#/about。
  2. 不依赖服务器配置，适合快速开发和简单项目。
  3. 不推荐，因为 URL 不够优雅，且 SEO 支持较差。

场景

  1. 静态站点部署（如 GitHub Pages）。
  2. 不支持 History API 的环境。

应用

import { createHashRouter, RouterProvider } from "react-router-dom";
import Home from "../views/Home";
import About from "../views/About";const router = createHashRouter([{ path: "/", element: <Home /> },{ path: "/about", element: <About /> },
]);function App() {return <RouterProvider router={router} />;
}export default App;

tips

  1. 无需服务器配置，但不适合对 URL 有美观或 SEO 要求的项目

createMemoryRouter

特点

  1. 不依赖浏览器环境，维护自己的内存中的路由栈。
  2. URL 不显示在浏览器地址栏。
  3. 常用于非浏览器环境（如 React Native）或开发工具（如 Storybook）

场景

  1. 测试环境。
  2. 开发工具或需要自定义路由栈的应用

应用

import { createMemoryRouter, RouterProvider } from "react-router-dom";
import Home from "../views/Home";
import About from "../views/About";const router = createMemoryRouter([{ path: "/", element: <Home /> },{ path: "/about", element: <About /> },
]);function App() {return <RouterProvider router={router} />;
}export default App;

tips

  1. 开发中调试时有用，但生产环境通常不使用。
  2. URL 不可见，不适合需要 SEO 的场景。

createStaticRouter

特点

  1. 用于服务器端渲染（SSR）。
  2. 基于预定义的静态路由配置。
  3. 无需用户交互，生成的路由用于服务端直接渲染

场景

  1. SSR（服务器端渲染）应用，例如使用 React Router 与 Next.js 或 Remix

应用

import { createStaticRouter, StaticRouterProvider } from "react-router-dom/server";
import Home from "../views/Home";
import About from "../views/About";const router = createStaticRouter([{ path: "/", element: <Home /> },{ path: "/about", element: <About /> },
]);function App() {return <StaticRouterProvider router={router} />;
}export default App;

tips

  1. createStaticRouter需要结合服务器环境。
  2. 主要用于预渲染生成的 HTML，例如静态页面生成器或 SSR 服务。

总结

路由方式特点适用场景优缺点
createBrowserRouter基于 HTML5 History API，推荐使用现代浏览器应用，生产环境URL 美观，需服务器支持
createHashRouterURL 包含 #，不依赖服务器快速开发、简单项目，静态站点部署URL 不优雅，SEO 支持较差
createMemoryRouter路由存储在内存中，无需浏览器环境测试环境、开发工具，无浏览器场景不适用于生产环境，URL 不可见
createStaticRouter静态路由，用于 SSR 和静态页面生成服务器端渲染依赖服务端，无客户端交互

路由配置

  1. 使用 Routes 和 Route 代替 React Router 5 的 Switch 和路由定义方式。
  2. 通过嵌套路由支持嵌套组件，可以实现更清晰的层次结构。
  3. path 属性定义路由路径，element 属性指定要渲染的组件。
// App.jsximport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';function App() {return (<Router><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/user/:id" element={<User />} /></Routes></Router>);
}function Home() {return <h1>Home Page</h1>;
}function About() {return <h1>About Page</h1>;
}function User({ id }) {return <h1>User Page for {id}</h1>;
}

动态路由

  1. 动态路由通过 :paramName 定义路径参数。
  2. 使用 useParams 钩子获取参数值。
  3. 动态路由使得可以根据 URL 参数渲染不同的内容，useParams 是获取路径参数的关键。
import { useParams } from 'react-router-dom';function User() {const { id } = useParams(); // 获取路径中的 id 参数return <h1>User ID: {id}</h1>;
}

导航

  1. 使用 useNavigate 替代旧版本中的 useHistory。
  2. useNavigate 提供更灵活的导航方式。
  3. navigate 可以接受路径字符串，也可以接受对象形式，适合处理编程式导航。
import { useNavigate } from 'react-router-dom';function Home() {const navigate = useNavigate();const goToAbout = () => {navigate('/about');};return (<div><h1>Home Page</h1><button onClick={goToAbout}>Go to About</button></div>);
}

嵌套路由

  1. 支持组件内部嵌套路由。
  2. 子路由通过 Outlet 渲染。
  3. Outlet 是子路由的占位符，嵌套路由更适合复杂布局。
import { Outlet, Link } from 'react-router-dom';function Dashboard() {return (<div><h1>Dashboard</h1><nav><Link to="profile">Profile</Link><Link to="settings">Settings</Link></nav><Outlet /> {/* 渲染子路由 */}</div>);
}function App() {return (<Router><Routes><Route path="/" element={<Home />} /><Route path="dashboard" element={<Dashboard />}><Route path="profile" element={<Profile />} /><Route path="settings" element={<Settings />} /></Route></Routes></Router>);
}

重定向

  1. 使用 Navigate 组件进行页面重定向。
  2. 可在组件渲染时动态重定向。
  3. Navigate 是一个 JSX 组件，用于在路由中实现条件跳转
import { Navigate } from 'react-router-dom';function ProtectedRoute({ isAuth, children }) {return isAuth ? children : <Navigate to="/login" />;
}function App() {const isAuth = false; // 假设用户未登录return (<Router><Routes><Routepath="/protected"element={<ProtectedRoute isAuth={isAuth}><ProtectedPage /></ProtectedRoute>}/><Route path="/login" element={<Login />} /></Routes></Router>);
}

数据加载

  1. React Router 6.4+ 引入了 loader 和 useLoaderData，用于预加载路由数据。
  2. 支持异步加载，优化页面渲染体验。
  3. loader 提供异步数据加载，提升数据获取的灵活性，useLoaderData 获取加载的数据。
import { createBrowserRouter, RouterProvider, useLoaderData } from 'react-router-dom';function UserProfile() {const data = useLoaderData(); // 获取预加载的数据return <h1>User Name: {data.name}</h1>;
}const router = createBrowserRouter([{path: "/user/:id",element: <UserProfile />,loader: async ({ params }) => {const response = await fetch(`/api/user/${params.id}`);return response.json();},},
]);function App() {return <RouterProvider router={router} />;
}

路由懒加载

  1. 减少首屏加载时间，提高性能；按需加载组件，降低内存占用；提升用户体验，特别是对于大型应用。
  2. 首次加载某个路由可能会有短暂延迟；如果 fallback 设计不当，可能导致用户体验下降；对 SEO 不友好，需配合服务器端渲染（SSR）解决。
  3. React.lazy(() => import('./ComponentPath')) 实现组件按需加载。
  4. Suspense用于显示加载状态（如 Loading...）直到懒加载组件加载完成
import React from "react";const Home = React.lazy(() => import("../views/Home"));
const About = React.lazy(() => import("../views/About"));
const Dashboard = React.lazy(() => import("../views/Dashboard"));const routes = [{path: "/",element: (<React.Suspense fallback={<div>Loading...</div>}><Home /></React.Suspense>),},{path: "/about",element: (<React.Suspense fallback={<div>Loading...</div>}><About /></React.Suspense>),},{path: "/dashboard",element: (<React.Suspense fallback={<div>Loading...</div>}><Dashboard /></React.Suspense>),},
];export default routes;

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import routes from "./routes";const router = createBrowserRouter(routes);function App() {return <RouterProvider router={router} />;
}export default App;

路由保护

  1. 使用高阶组件模式或条件渲染实现路由保护。
  2. 常与 Navigate 和认证逻辑结合。
function ProtectedRoute({ isAuth, children }) {return isAuth ? children : <Navigate to="/login" />;
}

错误处理

  1. 支持 errorElement 处理路由级别的错误。
const router = createBrowserRouter([{path: "/",element: <Home />,errorElement: <ErrorPage />, // 错误处理组件},
]);function ErrorPage() {return <h1>Something went wrong!</h1>;
}

综合案例

src/
├── router/
│   └── index.jsx  // 路由配置
├── views/
│   ├── Home.jsx   // 首页
│   ├── Login.jsx  // 登录页
│   ├── Content.jsx  // 内容页 (嵌套路由)
│   ├── ErrorPage.jsx // 错误页面
│   └── Protected.jsx // 受保护的页面
├── App.jsx        // 应用入口
└── main.jsx       // 渲染入口

// src/router/index.jsx
import { createBrowserRouter } from "react-router-dom";
import Home from "../views/Home";
import Login from "../views/Login";
import ErrorPage from "../views/ErrorPage";
import Content from "../views/Content";
import Protected from "../views/Protected";
import { Navigate } from "react-router-dom";const router = createBrowserRouter([{path: "/",element: <Navigate to="/home" replace />, // 重定向到 /home},{path: "/home",element: <Home />,errorElement: <ErrorPage />,children: [{path: "content",element: <Content />,},],},{path: "/login",element: <Login />,errorElement: <ErrorPage />,},{path: "/protected",element: <ProtectedRoute><Protected /></ProtectedRoute>,errorElement: <ErrorPage />,},{path: "*", // 404 页面element: <ErrorPage />,},
]);// 模拟受保护的路由
function ProtectedRoute({ children }) {const isAuthenticated = false; // 假设用户未登录return isAuthenticated ? children : <Navigate to="/login" replace />;
}export default router;

页面组件：src/views

// Home.jsx
import { Outlet, Link } from "react-router-dom";function Home() {return (<div><h1>Home Page</h1><nav><Link to="/home/content">Go to Content</Link><Link to="/protected">Go to Protected Page</Link></nav><Outlet /> {/* 嵌套路由 */}</div>);
}export default Home;

//Login.jsx
import { useNavigate } from "react-router-dom";function Login() {const navigate = useNavigate();const handleLogin = () => {// 模拟登录操作alert("Logged in!");navigate("/home"); // 登录后跳转到首页};return (<div><h1>Login Page</h1><button onClick={handleLogin}>Login</button></div>);
}export default Login;

//Content.jsx
function Content() {return <h1>Content Page</h1>;
}export default Content;

//Protected.jsx
function Protected() {return <h1>Protected Page: You are authenticated!</h1>;
}export default Protected;

//ErrorPage.jsx
function ErrorPage() {return <h1>404 Not Found</h1>;
}export default ErrorPage;

// src/App.js
import { RouterProvider } from "react-router-dom";
import router from "./router";function App() {return (<div><RouterProvider router={router} /></div>);
}export default App;

// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById("root")
);

效果

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

jQuery漏洞——CVE-2020-11022/CVE-2020-11023,保姆篇---春不晚

jQuery漏洞——CVE-2020-11022/CVE-2020-11023,保姆篇---春不晚

漏洞号&#xff1a;CVE-2020-11022/CVE-2020-11023 漏洞概况及影响 该类风险为应用安全缺陷类DXSS攻击&#xff0c;攻击者可以利用该漏洞注入恶意脚本代码&#xff0c;并在受害者的浏览器上执行。将导致受害者的个人信息泄露、账户被劫持、会话被劫持等安全问题。 一、漏洞版…
阅读更多...
Qt编写的文件传输工具

Qt编写的文件传输工具

使用QT编写的文件传输工具 文件传输工具通过发送udp广播消息将IP广播给其他开启该程序的局域网机器 文件传输工具 通过发送udp广播消息将IP广播给其他开启该程序的局域网机器 收到的广播消息可以显示在IP地址列表中&#xff0c;点击IP地址可以自动填充到IP地址栏内 选择文件…
阅读更多...
Certimate自动化SSL证书部署至IIS服务器

Certimate自动化SSL证书部署至IIS服务器

前言&#xff1a;笔者上一篇内容已经部署好了Certimate开源系统&#xff0c;于是开始搭建部署至Linux和Windows服务器&#xff0c;Linux服务器十分的顺利&#xff0c;申请证书-部署证书很快的完成了&#xff0c;但是部署至Windows Server的IIS服务时&#xff0c;遇到一些阻碍&a…
阅读更多...
aippt：AI 智能生成 PPT 的开源项目

aippt：AI 智能生成 PPT 的开源项目

aippt&#xff1a;AI 智能生成 PPT 的开源项目 在现代办公和学习中&#xff0c;PPT&#xff08;PowerPoint Presentation&#xff09;是一种非常重要的展示工具。然而&#xff0c;制作一份高质量的PPT往往需要花费大量的时间和精力。为了解决这一问题&#xff0c;aippt项目应运…
阅读更多...
3D 生成重建032-Find3D去找到它身上的每一份碎片吧

3D 生成重建032-Find3D去找到它身上的每一份碎片吧

3D 生成重建032-Find3D去找到它身上的每一份碎片吧 文章目录 0 论文工作1 论文方法2 实验结果 0 论文工作 该论文研究三维开放世界部件分割问题&#xff1a;基于任何文本查询分割任何物体中的任何部件。以往的方法在物体类别或部件词汇方面存在局限性。最近人工智能的进步在二…
阅读更多...
对于《穿越火线》和《欢乐升级》游戏的理解

对于《穿越火线》和《欢乐升级》游戏的理解

对于《穿越火线》的理解与感受 《穿越火线》&#xff08;CrossFire&#xff09;是一款承载了许多玩家青春记忆的经典FPS游戏。在初次接触这款游戏时&#xff0c;它给我的第一感觉是紧张刺激且极具沉浸感。无论是团队竞技的快节奏对抗&#xff0c;还是爆破模式中步步为营的策略…
阅读更多...
Composer在安装的过程中经常找不到刚更新的包

Composer在安装的过程中经常找不到刚更新的包

明明有v2.1.0版本&#xff0c;安装就是找不到这个版本的包。 1. Composer 官方网址&#xff1a;https://getcomposer.org 中文网站&#xff1a;https://www.phpcomposer.com 官方文档&#xff1a;https://docs.phpcomposer.com 2. Packagist Packagist 是 Composer的组件仓库…
阅读更多...
网易云信荣获“HarmonyOS NEXT SDK星河奖”

网易云信荣获“HarmonyOS NEXT SDK星河奖”

近日&#xff0c;鸿蒙生态伙伴 SDK 开发者论坛在北京举行。 网易云信凭借在融合通信领域的技术创新和鸿蒙生态贡献&#xff0c;荣获鸿蒙生态“HarmonyOS NEXT SDK星河奖”。 会上&#xff0c;华为鸿蒙正式推出 SDK 生态繁荣伙伴支持计划&#xff0c;旨在为 SDK 领域伙伴和开发…
阅读更多...
【OpenCV】模板匹配

【OpenCV】模板匹配

理论 模板匹配是一种在较大图像中搜索和查找模板图像位置的方法。为此&#xff0c;OpenCV 带有一个函数 cv.matchTemplate&#xff08;&#xff09; 。它只是在输入图像上滑动模板图像&#xff08;如在 2D 卷积中&#xff09;&#xff0c;并比较模板图像下的模板和输入图像的补…
阅读更多...
TCP/IP协议详解（小白）

TCP/IP协议详解（小白）

TCP/IP协议详解 TCP/IP协议包含了一系列的协议&#xff0c;也叫TCP/IP协议族&#xff08;TCP/IP Protocol Suite&#xff0c;或TCP/IP Protocols&#xff09;&#xff0c;简称TCP/IP。TCP/IP协议族提供了点对点的连结机制&#xff0c;并且将传输数据帧的封装、寻址、传输、路由…
阅读更多...
从小学题到技术选型哲学：以智能客服系统为例，解读相关AI技术栈20241211

从小学题到技术选型哲学：以智能客服系统为例，解读相关AI技术栈20241211

&#x1f9e0;&#x1f4a1;从小学题到技术选型哲学&#xff1a;以智能客服系统为例&#xff0c;解读相关AI技术栈 引言&#xff1a;从小学数学题到技术智慧 &#x1f4da;✨ 在小学数学题中&#xff0c;有这样一道问题&#xff1a; “一个长方形变成平行四边形后&#xff0c…
阅读更多...
Scala的正则表达式二

Scala的正则表达式二

验证用户名是否合法 规则 1.长度在6-12之间 2.不能数字开头 3.只能包含数字&#xff0c;大小写字母&#xff0c;下划线def main(args: Array[String]): Unit {val name1 "1admin"//不合法&#xff0c;是数字开头val name2 "admin123"//合法val name3 &quo…
阅读更多...
funcaptcha 验证码逆向协议通过，算法实现

funcaptcha 验证码逆向协议通过，算法实现

声明 本文章中所有内容仅供学习交流&#xff0c;抓包内容、敏感网址、数据接口均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff0c;若有侵权&#xff0c;请联系我立即删除&#xff01;
阅读更多...
Simdroid-EC：液冷仿真新星，助力新能源汽车电机控制器高效散热

Simdroid-EC：液冷仿真新星，助力新能源汽车电机控制器高效散热

近年来&#xff0c;新能源电动车的销量呈现出快速增长的态势。据统计&#xff0c;2024 年1-10月中国新能源汽车销量达728万辆&#xff0c;同比增长37.8%。 电机控制器在新能源汽车中对于保障动力和安全性能扮演着至关重要的角色&#xff0c;其核心部件IGBT&#xff08;绝缘栅双…
阅读更多...
linux学习笔记02 linux中的基础设置（修改主机名、ip、防火墙、网络配置管理）

linux学习笔记02 linux中的基础设置（修改主机名、ip、防火墙、网络配置管理）

目录 修改主机名 ​编辑 修改ip地址 防火墙 关闭networkmanage 修改主机名 查看主机名 hostnamectl status 修改主机名 vim /etc/hostname 修改ip地址 vim /etc/sysconfig/network-scripts/ifcfg-ens33 输入这个命令后对照以下文件修改 TYPE"Ethernet" PROXY_M…
阅读更多...
什么是缓冲区？？？

什么是缓冲区？？？

欢迎拜访&#xff1a;羑悻的小杀马特.-CSDN博客 本篇主题&#xff1a;什么是缓冲区 制作日期&#xff1a;2024.12.11 隶属专栏&#xff1a;linux之旅 目录 一概念&#xff1a; 二缓冲类型&#xff1a; 三所谓的FILE&#xff1a; 四简单实现libc库&#xff1a; 一概念&…
阅读更多...
Linux 添加spi-nor flash支持

Linux 添加spi-nor flash支持

1. spi-nor flash简介 在嵌入式ARM开发过程中通常会使用到spi-nor flash&#xff0c;主要用于固化u-boot镜像以支持spi方式启动系统。目前常用的spi-nor flash有gd25wq128e、w25q128等flash芯片&#xff0c;下述以gd25wq128e为例进行讲解。 2.调试通常遇到的问题 无法识别到…
阅读更多...
从零开始的使用SpringBoot和WebSocket打造实时共享文档应用

从零开始的使用SpringBoot和WebSocket打造实时共享文档应用

在现代应用中&#xff0c;实时协作已经成为了非常重要的功能&#xff0c;尤其是在文档编辑、聊天系统和在线编程等场景中。通过实时共享文档&#xff0c;多个用户可以同时对同一份文档进行编辑&#xff0c;并能看到其他人的编辑内容。这种功能广泛应用于 Google Docs、Notion 等…
阅读更多...
亚信安全DeepSecurity完成与超云超融合软件兼容性互认

亚信安全DeepSecurity完成与超云超融合软件兼容性互认

近日&#xff0c;亚信安全与超云数字技术集团有限公司&#xff08;以下简称“超云”&#xff09;联合宣布&#xff0c;亚信安全成功完成与超云超融合软件的产品兼容性互认证。经严格测试&#xff0c;亚信安全云主机安全DeepSecurity与超云FS5000增强型融合系统&#xff08;简称…
阅读更多...
实践项目2-自动计价电子秤

实践项目2-自动计价电子秤

自动计价电子秤 一、功能说明 基于AVR单片机设计一自动计价电子秤。根据输入的价格以及检测的重量自动计算总价并打印&#xff08;串口模拟&#xff09;。 二、具体要求 1、开机后实时检测重量并显示&#xff1b; 2、通过按键输入并显示价格&#xff0c;具有修改功能&#…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023