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>

路由表方式优势

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

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

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

4. 易于维护和扩展

完整功能示例

带路由守卫的配置

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