目录

前言

实现步骤

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 的路由配置体验。这种方式特别适合需要统一管理路由逻辑的项目，开发者可以根据项目需求灵活选择传统声明式或集中式配置方案。