React使用路由表

server/2025/3/16 17:31:07/

目录

前言

实现步骤

1. 安装依赖

2. 创建路由配置文件

高级配置

嵌套路由配置

对比两种配置方式

传统 JSX 方式

路由表方式优势

完整功能示例

带路由守卫的配置

注意事项

总结


前言

React Router 从 v6 版本开始支持类似 Vue 的集中式路由表配置方式,通过 useRoutes Hook 可以将路由配置统一管理。这种方式相比传统的 JSX 声明式路由更加简洁,特别适合中大型项目。


实现步骤

1. 安装依赖

npm install react-router-dom

2. 创建路由配置文件

新建 src/router/index.jsx

javascript">import { lazy } from 'react'
import { Navigate } from 'react-router-dom'const Home = lazy(() => import('../views/home'))
const Login = lazy(() => import('../views/login'))const routes = [{path: '/',element: <Navigate to='/home' /> // 重定向},{path: '/home',element: <Home />},{path: '/login',element: <Login />},{path: '*', // 匹配其他路由element: <div>404</div>}
]export default routes;

修改main.jsx

javascript">import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import './index.css'
import App from './App.jsx'createRoot(document.getElementById('root')).render(<StrictMode><BrowserRouter><App /></BrowserRouter></StrictMode>,)

修改App.jsx

javascript">import { useState, Suspense } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import routes from './router/index'
import { useRoutes } from 'react-router-dom'function App() {const [count, setCount] = useState(0)const element = useRoutes(routes)return (<><Suspense fallback={<div>加载中...</div>}>{element}</Suspense></>)
}export default App

高级配置

嵌套路由配置

javascript">const routes = [{path: '/dashboard',element: <DashboardLayout />,children: [{index: true,element: <DashboardIndex />},{path: 'settings',element: <DashboardSettings />}]}
]

在布局组件中使用 <Outlet />

javascript">// DashboardLayout.jsx
import { Outlet } from 'react-router-dom'export default function DashboardLayout() {return (<div><h1>Dashboard</h1><Outlet /></div>)
}

对比两种配置方式

传统 JSX 方式

javascript"><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} />
</Routes>

路由表方式优势

  1. 集中管理所有路由配置

  2. 更清晰的路由层级结构

  3. 方便实现路由守卫等统一逻辑

  4. 易于维护和扩展


完整功能示例

带路由守卫的配置

javascript">const routes = [{path: '/admin',element: <AuthGuard><AdminLayout /></AuthGuard>,children: [{path: 'dashboard',element: <AdminDashboard />}]}
]// 路由守卫组件
function AuthGuard({ children }) {const isLogin = /* 你的登录状态判断逻辑 */return isLogin ? children : <Navigate to="/login" replace />
}

注意事项

  1. element 属性必须直接传递 JSX 元素

  2. 使用 index: true 代替 path: "" 配置默认子路由

  3. 动态参数使用 :param 语法

  4. 导航使用 useNavigate Hook


总结

通过使用 useRoutes + 集中式路由表的方式,React 也可以实现类似 Vue Router 的路由配置体验。这种方式特别适合需要统一管理路由逻辑的项目,开发者可以根据项目需求灵活选择传统声明式或集中式配置方案。


http://www.ppmy.cn/server/175487.html

相关文章

31.代码随想录算法训练营第三十一天|56. 合并区间,738. 单调递增的数字 ,968. 监控二叉树(一刷跳过)

31.代码随想录算法训练营第三十一天|56. 合并区间&#xff0c;738. 单调递增的数字 &#xff0c;968. 监控二叉树&#xff08;一刷跳过&#xff09; 56. 合并区间 - 力扣&#xff08;LeetCode&#xff09;&#xff0c; 以数组 intervals 表示若干个区间的集合&#xff0c;其中…

MySQL开发陷阱与最佳实践:第1章:MySQL开发基础概述-1.1 MySQL简介与应用场景

&#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 文章大纲 MySQL开发陷阱与最佳实践&#xff1a;第1章&#xff1a;MySQL开发基础概述-1.1 MySQL简介与应用场景1.1.1 MySQL的发展历程与市场地位1.1.2 MySQL的核心特性与技术优势1.1.2…

使用 Nginx 进行前端灰度发布的策略与实践

1. 引言 灰度发布的概念 灰度发布&#xff0c;也称为金丝雀发布&#xff0c;是一种软件发布策略&#xff0c;通过向一小部分用户群体逐步推出新版本&#xff0c;收集反馈并监控性能&#xff0c;以确保新版本在大规模部署前不会出现问题。这种方法可以有效降低发布风险&#x…

目标检测中衡量模型速度和精度的指标:FPS和mAP

“FPS”和“mAP”分别衡量了模型的速度和精度。 FPS&#xff08;Frames Per Second&#xff09; 定义&#xff1a;FPS是“每秒传输帧数”的缩写&#xff0c;用于衡量计算机视觉系统&#xff08;如目标检测、图像识别等&#xff09;的实时性能。它表示系统每秒钟能够处理的图像…

程序化广告行业(17/89):AdX/SSP资源剖析与广告服务解读

程序化广告行业&#xff08;17/89&#xff09;&#xff1a;AdX/SSP资源剖析与广告服务解读 大家好&#xff01;一直以来&#xff0c;我都对程序化广告领域充满热情&#xff0c;深知这个行业知识丰富且不断发展。今天写这篇博客&#xff0c;就是希望能和大家一起学习进步&#…

Mac下安装Zed以及Zed对MCP(模型上下文协议)的支持

Zed是当前新流行的一种编辑器&#xff0c;支持MCP&#xff08;模型上下文协议&#xff09; Mac下安装Zed比较简单&#xff0c;直接有安装包&#xff0c;在这里&#xff1a; brew install --cask zedMac Monterey下是可以安装上的&#xff0c;亲测有效。 配置 使用CtrlShiftP…

数据库原理9

1.1970年美国IBM公司的研究员E.F.Codd连续发表论文&#xff0c;主要论述的是关系数据库 2.层次模型不能直接表示m:n联系 3.数据库只有一个模式&#xff0c;也只有一个内模式&#xff0c;所以模式/内模式映像是唯一的&#xff0c;它定义数据库全局逻辑结构与存储结构之间的对应…

ChatGPT、DeepSeek、Grok 三者对比:AI 语言模型的博弈与未来

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 1. 引言 随着人工智能技术的飞速发展&#xff0c;AI 语言模型已经成为人机交互、内容创作、代码生成、智能问答等领域的重要工具…