react 项目路由配置(react-router-dom 版本 v6.3、v6.4)

根据 react-router-dom 的版本,有不同的方式

一、react-router-dom v6.3

用到的主要 api:

  • BrowserRouter
  • useRoutes
  • Outlet

下面是详细步骤:

1、index.js

  • BrowserRouter 用来实现 单页的客户端路由
  • 使用 BrowserRouter 包裹 App
  • 放在 顶级 位置,重要!!
  • 支持嵌套路由,用于 history 模式
  • hash 模式使用 HashRouter
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<BrowserRouter><React.StrictMode><App /></React.StrictMode></BrowserRouter>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

如果遇到下图这种报错,就是没有将 BrowserRouter 像上图一样放在 顶级,一定要放顶级!

在这里插入图片描述

2、routes.js

用 数组 描述路由,包含必要参数 pathelementchildren

例如:

import { UserOutlined } from "@ant-design/icons";
import Abroad from "./pages/Abroad";
import Domestic from "./pages/Domestic";
import Layout from "./layout/index";
import { Navigate } from "react-router-dom";const routes = [{title: "平台管理",path: "/manage",element: <Layout />,icon: <UserOutlined />,children: [{title: "境内平台管理",path: "/manage/domestic",element: <Domestic />,icon: <UserOutlined />,},{title: "境外平台管理",path: "/manage/abroad",element: <Abroad />,icon: <UserOutlined />,},],},{path: "/",element: <Navigate to="/manage/domestic" />,},
];export default routes;

3、App.js

使用 useRoutes 渲染出一级路由,参数即为我们在上一步的路由数组

  • useRoutes 是 react-router-dom 库中提供的一个 Hook,用于 基于路由配置生成路由匹配器(Router Matcher)的方法
  • useRoutes 接收的路由配置对象应该是一个由 若干个路由配置组成的数组,每个路由配置包含以下属性:
    • path:字符串类型,表示 URL 路径匹配规则;
    • element:React 组件,表示如果 URL 匹配成功后要显示的组件;
    • children:嵌套子路由的路由配置数组。
import React from "react";
import { useRoutes } from "react-router-dom";
import routes from "./routes";const App = () => {const element = useRoutes(routes);return <>{element}</>;
};export default App;

4、layout.jsx

实际场景,如后台管理项目,需要展示多级路由,我们一般会创建一个layout文件

  • 按照 左 Menu右 Content 的设定来举例
  • 嵌套的二级路由,使用 outlet 渲染(类似于vue中的 <router-view>
  • 例子中,包含了一些菜单处理的代码,如递归渲染、默认选中,可选择性观看
import React, { useState } from "react";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { Layout, Menu, Button, theme } from "antd";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
import routes from "../routes/index";const { Header, Sider, Content } = Layout;// Menu格式处理
function getMenu(rout) {const rs = rout.map((item) => {return {label: item.title,key: item.path,icon: item.icon,children: item.children && getMenu(item.children),};});return rs;
}// 递归层级
function findParents(key, tree) {let parents = [];function findParent(nodes, key) {for (let node of nodes) {if (node.path === key) {return true;}if (node.children && findParent(node.children, key)) {parents.push(node.path);return true;}}return false;}findParent(tree, key);parents.push(key);return parents;
}// 获取当前路由所在层级
function getOpenKeys(pathname, list) {if (!pathname) return ["/manage", "/manage/domestic"];let keys = findParents(pathname, list);return keys;
}const App = () => {const [collapsed, setCollapsed] = useState(false);const {token: { colorBgContainer, borderRadiusLG },} = theme.useToken();// 递归获取有效菜单项const list = routes.filter((item) => item.title);const items = getMenu(list);// 菜单,默认展开、选中处理const location = useLocation();const keys = getOpenKeys(location.pathname, list);const defaultSelectedKeys = keys;const defaultOpenKeys = keys;// 跳转let navigate = useNavigate();function handleClick(e) {navigate(e.key);}return (<Layout><Sider trigger={null} collapsible collapsed={collapsed}><div style={{ width: "100%", height: "80px" }}></div>{/* 菜单 */}<Menumode="inline"theme="dark"defaultSelectedKeys={defaultSelectedKeys}defaultOpenKeys={defaultOpenKeys}onClick={handleClick}items={items}></Menu></Sider><Layout><Headerstyle={{padding: 0,background: colorBgContainer,}}><Buttontype="text"onClick={() => setCollapsed(!collapsed)}style={{ marginBottom: 16 }}>{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}</Button></Header><Contentstyle={{margin: "24px 16px",padding: 24,minHeight: 280,background: colorBgContainer,borderRadius: borderRadiusLG,overflowY: "auto",}}>{/* 二级路由 */}<Outlet /></Content></Layout></Layout>);
};
export default App;

v6.3 的版本,路由设置到此结束,接下来是 v6.4

二、react-router-dom v6.4

主要 api:

  • createBrowserRouter
  • RouterProvider
  • Outlet

在 v6.3 方案的基础上,换掉 index.js 和 App.js 即可

1、index.js

BrowserRouter 的使用去掉


import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";// v6.3 使用此API,v6.4使用会报错
// import { BrowserRouter } from "react-router-dom";const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(// <BrowserRouter><React.StrictMode><App /></React.StrictMode>// </BrowserRouter>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

2、App.js

useRoutes 的使用去掉,增加 createBrowserRouterRouterProvider 的相关设置

  • createBrowserRouter 创建路由
  • 挂载到 RouterProviderrouter

import React from "react";
import routes from "./routes";// v6.3 userRoutes钩子
// import { useRoutes } from "react-router-dom";
// const App = () => {
//   const element = useRoutes(routes);
//   return <>{element}</>;
// };// v6.4 createBrowserRouter + RouterProvider
import { createBrowserRouter, RouterProvider } from "react-router-dom";
const router = createBrowserRouter(routes);
const App = () => {return (<><RouterProvider router={router} /></>);
};export default App;

然后就完成啦~

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

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

相关文章

【六十一】【算法分析与设计】高精度乘法和高精度除法

高精度乘以单精度 由于计算机的基本数据类型如 int 或 long 有其大小限制&#xff0c;当我们需要进行超出这些基本类型范围的计算时&#xff0c;就需要使用大数乘法技术。一种简单的大数乘法算法——单精度乘高精度数算法。这种方法特别适用于将一个大数&#xff08;用字符串表…

[ LeetCode ] 题刷刷(Python)-第58题:最后一个单词的长度

题目描述 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 示例 示例 1&#xff1a; 输入&#xff1a;s "Hello World" 输出&…

(1)认识人工智能

第一章 认识人工智能 引言 本人目前大三&#xff0c;双非一本的人工智能专业&#xff0c;代码能力不算太差&#xff0c;做过项目&#xff0c;也打了比赛&#xff0c;获了奖&#xff0c;但是走技术路线总会有否定自己的感觉&#xff0c;可能是感觉自己的才能没有在搞技术方面实…

UML绘制

processon官网 https://www.processon.com/template_create 官方学习地址 https://plantuml.com/zh/class-diagram 在Android studio 中自动生成类图 https://blog.csdn.net/zyfzhangyafei/article/details/126636358 plantUML 在线编辑 https://www.plantuml.com/plantuml/um…

小红书电商运营实战课,从0打造全程实操(65节视频课)

课程内容&#xff1a; 1.小红书的电商介绍 .mp4 2.小红书的开店流程,mp4 3.小红书店铺基础设置介绍 ,mp4 4.小红书店铺产品上架流程 .mp4 5.客服的聊天过程和子账号建立 .mp4 6.店铺营销工具使用和后台活动参加 .mp4 7.小红书产品上架以及拍单教程,mp4 8.小红书如何选品…

数据分析_商品维度占比及变化可视化分析(Pandas和Matplotlib)

数据分析_商品维度占比及变化可视化分析(Pandas和Matplotlib) 分析维度包括: 各商品年度销量占比 各商品月度销量变化 构建测试数据 这里你可以了解到: 如何生成时间相关的数据。 如何从列表&#xff08;可迭代对象&#xff09;中生成随机数据。 Pandas 的 DataFrame 自…

IDM下载管理工具的详细介绍

第一章:IDM简介与安装 Internet Download Manager(IDM)是一款备受欢迎的下载管理工具,具有强大的下载加速功能和丰富的功能特性。本章将介绍IDM的基本信息,以及如何进行安装和设置。 1.1 IDM简介 IDM是由美国公司Tonec Inc.开发的一款下载管理器,它能够提供强大的下载…

eggjs 日志记录配置 记录

eggjs日志配置 ## //config.default.js // 日志配置config.logger {level: "INFO", // SILENT, DEBUG, INFO, WARN, ERROR, FATALconsoleLevel: "DEBUG", // 控制台日志输出级别dir: "/logs", // 日志文件的存储目录type: "dateFile…

MVC、MVP、MVVM

MVC、MVP和MVVM是三种流行的软件架构模式&#xff0c;它们被设计来组织代码结构&#xff0c;提高代码的可维护性、可测试性和可扩展性。尽管它们在高层次目标上一致&#xff0c;但在实现细节和应用交互方式上各有特点。 MVC&#xff08;Model-View-Controller&#xff09; Mo…

【JVM系列】关于静态块、静态属性、构造块、构造方法的执行顺序

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

2.Vue简介

Vue简介 Vue (发音为 /vjuː/&#xff0c;类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;帮助你高效地开发用户界面。无论是简单还是复杂的界面&#xff0c;V…

【网站项目】“最多跑一次”小程序

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

【一竞技DOTA2】双冠王N0tail将发布新书自传《性格胜过天赋》

1、近日Ti双冠王N0tail&#xff0c;在个人推特上宣布将发布自己的自传《性格胜过天赋》。N0tail职业生涯豪夺两届Ti冠军&#xff0c;700万美元个人生涯奖金亦是电竞史最高的传奇选手。 “经过许多年的努力和收到的大量请求&#xff0c;我将发布我的自传新书《性格胜过天赋》&am…

C++ 核心编程 - 引用

文章目录 2.1 引用的基本使用2.2 注意事项2.3 引用作函数参数2.4 引用作函数返回值2.5 引用的本质2.6 常量引用 2.1 引用的基本使用 作用&#xff1a; 给变量起别名&#xff0c;语法为 数据类型 &别名 原名 int main(){int a 100;int &b a;cout << "a …

特征值eigenvalue与特征向量eigenvector

特征值&#xff0c;特征向量概念 在线性代数中&#xff0c;对于一个给定的线性变换A&#xff0c;他的特征向量v经过这个线性变换的作用之后&#xff0c;得到的新向量仍然与原来的 v v v保持在同一条直线上。但长度或方向也许会改变。即&#xff1a; A v Av Av λ v \lambda…

戒烟生活记录

今天是2024年4月15日&#xff0c;从大前天也就是12号下班后&#xff0c;吃的有一点饱&#xff0c;就感觉身体及其难受&#xff0c;气短呼吸不上&#xff0c;我查了后可能是心脏的问题&#xff0c;并且晚上睡觉有一种呼吸不上&#xff0c;憋气的感觉&#xff0c;然后我就又开始决…

强化网络安全防线,您的等级保护措施到位了吗?

在这个信息化飞速发展的时代&#xff0c;网络安全已经成为我们每个人都需要关注的问题。无论是企业还是个人&#xff0c;我们的工作和生活都越来越依赖于网络。确保网络环境的安全&#xff0c;防止信息泄露和网络攻击&#xff0c;已经成为了一项至关重要的任务。等级保护制度作…

如何做一个优秀的系统工程师?

一、背景 做好一个优秀系统工程师的关键在于其在产品开发生命周期中对需求分析的有效把握与运用&#xff0c;这个过程直接影响到系统的整体架构设计、规格参数的明确设定以及业务流程的深度挖掘与优化。需求分析不仅是理解用户实际问题的核心环节&#xff0c;更是界定系统开发…

无限滚动分页加载与下拉刷新技术探析:原理深度解读与实战应用详述

滚动分页加载&#xff08;也称为无限滚动加载、滚动分页等&#xff09;是一种常见的Web和移动端应用界面设计模式&#xff0c;用于在用户滚动到底部时自动加载下一页内容&#xff0c;而无需点击传统的分页按钮。这种设计旨在提供更加流畅、连续的浏览体验&#xff0c;减少用户交…

Go语言中通过数据对齐降低内存消耗和提升性能

数据对齐是一种安排数据分配方式以加速 CPU 访问内存的方法。 不了解这个概念会导致额外的内存消耗甚至性能下降。 要了解数据对齐的工作原理&#xff0c;让我们首先讨论没有它会发生什么。假设我们分配两个变量&#xff0c;一个 int32 类型的 &#xff08;32 B&#xff09; 和…