目录
前言
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 />
}
注意事项
element
属性必须直接传递 JSX 元素使用
index: true
代替path: ""
配置默认子路由动态参数使用
:param
语法导航使用
useNavigate
Hook
总结
通过使用 useRoutes
+ 集中式路由表的方式,React 也可以实现类似 Vue Router 的路由配置体验。这种方式特别适合需要统一管理路由逻辑的项目,开发者可以根据项目需求灵活选择传统声明式或集中式配置方案。