React使用路由表

前言

实现步骤

1. 安装依赖

2. 创建路由配置文件

高级配置

嵌套路由配置

对比两种配置方式

传统 JSX 方式

路由表方式优势

完整功能示例

带路由守卫的配置

注意事项

总结

前言

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

实现步骤

1. 安装依赖

npm install react-router-dom

2. 创建路由配置文件

新建 src/router/index.jsx：

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

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

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

高级配置

嵌套路由配置

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

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

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

对比两种配置方式

传统 JSX 方式

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

路由表方式优势

集中管理所有路由配置
更清晰的路由层级结构
方便实现路由守卫等统一逻辑
易于维护和扩展

完整功能示例

带路由守卫的配置

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 />
}