React之路由

React之路由

背景： react: 18.2.0 路由：react-router-dom: 6.14.2

1、路由表配置

src下新建router/index.ts

import React, { lazy } from 'react'
import { Navigate } from 'react-router-dom'
import Layout from '@/layout/Index' 
import { JSX } from 'react/jsx-runtime'

// 路由懒加载
const Home = lazy(() => import('@/views/Home'))
const About = lazy(() => import('@/views/About'))
const Error404 = lazy(() => import('@/views/Error/404'))

// 封装加载异步组件
const withLoadingComponent = (comp: JSX.Element) => (
  <React.Suspense fallback={<div>loading</div>}>{comp}</React.Suspense>
)

// 1 根据接口数据动态生成路由对象
// 2 根据路由对象 动态生成菜单列表
const routes = [
  {
    path: '/',
    element: <Navigate to="/home" />
  },
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: '/home',
        element: withLoadingComponent(<Home />),
        meta: {
          title: '首页'
        }
      },
      {
        path: '/about',
        element: withLoadingComponent(<About />),
        meta: {
          title: '关于作者'
        }
      }
    ]
  },

  // 用户随便输入一个未处理的路径，重定向到404
  {
    path: '*',
    element: withLoadingComponent(<Error404 />)
  }
]

export default routes

注意：

• 路由重定向需要使用 Navigate 组件对象，如：
• 路由懒加载需要使用react中的lazy 函数，如： lazy(() => import('@/views/Home'))， 不过，所有懒加载的组件都必须被自定义加载loading高级组件包裹

// 自定义加载动画高级组件
const withLoadingComponent = (comp: JSX.Element) => (
  <React.Suspense fallback={<div>loading</div>}>{comp}</React.Suspense>
)
// 包裹懒加载组件
element: withLoadingComponent(<Home />),

2、在项目入口文件注入router

import ReactDOM from 'react-dom/client'
// UI css
// antd v5 自带的重置样式
import 'antd/dist/reset.css'
// 导入路由模式
import { BrowserRouter } from 'react-router-dom'
import App from './App.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
 <BrowserRouter>
  <App />
 </BrowserRouter>
)

3、在跟组件App.tsx下面，使用useRoutes构建路由占位符

// 路由配置对象
import routes from './router' // .router/index.tsx
import { useRoutes } from 'react-router-dom'
function App() {
  // 模拟路由中的 组件
  const outlet = useRoutes(routes)
  return <>{outlet}</>
}

export default App

4、编程式路由导航

import { useNavigate } from 'react-router-dom'
const navigate = useNavigate()
navigate(‘路径’)

5、组件路由导航

import { Link } from 'react-router-dom'
<Link to={'路径'}>Back Home</Link>