目录
前言
实现步骤
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>
路由表方式优势
-
集中管理所有路由配置
-
更清晰的路由层级结构
-
方便实现路由守卫等统一逻辑
-
易于维护和扩展
完整功能示例
带路由守卫的配置
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 />
}
注意事项
-
element
属性必须直接传递 JSX 元素 -
使用
index: true
代替path: ""
配置默认子路由 -
动态参数使用
:param
语法 -
导航使用
useNavigate
Hook
总结
通过使用 useRoutes
+ 集中式路由表的方式,React 也可以实现类似 Vue Router 的路由配置体验。这种方式特别适合需要统一管理路由逻辑的项目,开发者可以根据项目需求灵活选择传统声明式或集中式配置方案。