路由管理

1. 集成 react-router

$ npm install react-router-dom@6

2. 路由配置

思路： 創(chuàng)建路由對象->渲染路由->引入掛載路由

• 路由懶加載

const Test = React.lazy(() => import('你的組件'));
<Suspense fallback="loading...">
  <Test />
</Suspense>

• 創(chuàng)建路由對象

// 聲明對象類型
export interface routeType {
  path: string
  // 非必傳
  element?: any
  // 非必傳
  children?: Array<routeType>
  // 允許加入任意值
  // 在實(shí)參中新增了sex屬性，interface中并沒有定義，此時(shí)不會報(bào)錯(cuò)
  [propname: string]: any;
  // 非必傳
  meta?: {
    title?: string
  }
  // 非必傳
  redirect?: string
}

const routes: Array<routeType> = [
  {
    path: '/',
    element: () => import('../App'),
    children: [
      {
        path: '/',
        redirect: '/home',
      },
      {
        path: '/home',
        element: () => import('@/pages/home'),
        meta: {
          title: "首頁",
        }
      },
      {
        path: '/about',
        element: () => import('@/pages/about'),
        meta: {
          title: "關(guān)于",
        }
      },
      {
        path: '/about/:id',
        element: () => import('@/pages/about'),
        meta: {
          title: "關(guān)于",
        }
      },
      {
        path: '*',
        element: () => import('@/pages/error/404'),
        meta: {
          title: '404'
        }
      }
    ]
  },
]

export default routes;

• 渲染路由

import React from 'react';
import { useRoutes, Navigate } from 'react-router-dom';
import _ from 'lodash'; // js工具庫
import routes, { routeType } from './routers';

export default function Routes() {
  const element = useRoutes(renderRoutes(routes));
  return element;
}

function renderRoutes(routes: Array<routeType>) {
  return _.map(routes, (item: routeType) => {
    let res: routeType = { ...item };
    if (!item?.path) return;

    // element
    if (item?.element) {
      const Component = React.lazy(item.element);
      res.element = (<React.Suspense fallback={'...'}>
          <Component />
      </React.Suspense>);
    }

    // children
    if (item?.children) {
      res.children = renderRoutes(item.children);
    }

    // 重定向
    if (item?.redirect) {
      res.element = (
        <Navigate to={item.redirect} replace />
      )
    }

    return res;
  })
}

• 引入掛載路由

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import Routes from '@/router/index'

ReactDOM.createRoot(document.getElementById('root')!).render(
 <React.StrictMode>
   <BrowserRouter>
     <Routes/>
   </BrowserRouter>
 </React.StrictMode>
)

參考文章vite 搭建 react18 項(xiàng)目