当前位置: 首页 > article >正文

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


http://www.kler.cn/a/588454.html

相关文章:

  • 使用GoldenGate完成SQLserver到Oracle的数据实时同步
  • Django项目之订单管理part3
  • Markdig:强大的 .NET Markdown 解析器详解
  • 【AI时代移动端安全开发实战:从基础防护到智能应用】
  • 责任链模式:优雅处理请求的设计艺术
  • k8s 网络基础解析
  • 织梦dedecmsV5.7提示信息提示框美化(带安装教程和效果展示)
  • python中print函数的flush如何使用
  • kubernetes|云原生|部署单master的kubernetes 1.25.5版本集群完全记录(使用contained 运行时)
  • 【VUE2】第五期——VueCli创建项目、Vuex多组件共享数据、json-server——模拟服务端api
  • CSS3学习教程,从入门到精通,CSS3 文字样式语法知识点及案例代码(7)
  • 消息队列的特性与使用场景:Kafka、ActiveMQ、RabbitMQ与RocketMQ的深度剖析
  • 图论之cruskal算法(克鲁斯卡尔)
  • Bash语言的进程管理
  • 数字化转型 - 数据驱动
  • 出现缓存雪崩、缓存穿透、缓存预热、缓存更新和缓存降级的场景,以及如何解决
  • 【数据结构与算法】Java描述:第四节:二叉树
  • DVWA 命令注入从 Low 到 Impossible 教程及源码分析
  • 监控易对各类服务器硬件的广泛支持和深入监控能力
  • pybind11出现的问题