React-路由配置

路由标签

import React, { lazy, Suspense } from "react";
import { BrowserRouter, HashRouter, Routes, Route, Outlet } from "react-router-dom";

// BrowserRouter 路由模式- history模式
function Router1() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/index" element={<p>index</p>}></Route>
        <Route path="/index1" element={<p>index1</p>}></Route>
      </Routes>
    </BrowserRouter>
  )
}

// HashRouter 路由模式- hash模式
function Router2() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/index" element={<p>index</p>}></Route>
        <Route path="/index1" element={<p>index1</p>}></Route>
      </Routes>
    </HashRouter>
  )
}

// Outlet 嵌套路由时，写在父级页面中渲染子页面的位置
function ParPage() {
  return (
    <div>
      <div>ParPage</div>
      <Outlet />
    </div>
  )
}

// lazy 懒加载组件的方法，Suspense 用于包裹懒加载组件，并提供未加载完时的缺省显示
function LazyComp() {
  const Comp = lazy(()=>import('./src/pages/index'));
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Comp></Comp>
    </Suspense>
  )
}

路由配置文件

routes/index.ts

interface IRouteObject {
  path: string;
  name?: string;
  component?: () => Promise<any>;
  children?: IRouteObject[];
}
// 路由配置
const routes: IRouteObject[] = [
  {
    path: '/',
    name: '首页',
    component: () => import("@/pages/Home"),
  },
  {
    path: '/page1',
    name: 'page1',
    component: () => import('@/pages/Page1'),
    children: [
      {
        path: 'page2',
        name: 'page2',
        component: () => import('@/pages/Page2')
      },
    ]
  },
];

export default routes;

路由渲染组件

routes/RoutesDom.ts

import React, { lazy, Suspense } from "react";
import { BrowserRouter as Router, Routes, Route, Outlet } from "react-router-dom";
import routes from "./index";

// 路由配置组件
const RoutesDom: React.FC = () => {
  return (
    <Router>
      <Suspense>
        <Routes>
          {getRouteComp(routes)}
        </Routes>
      </Suspense>
    </Router>
  )
}
export default RoutesDom;

// 懒加载组件
const lazyComp = (component: any) => {
  if (component) {
    const Comp = lazy(component);
    return <Comp><Outlet /></Comp>;
  } else {
    return <Outlet />;
  }
}

// 递归获取路由组件
const getRouteComp = (routes: Array<any>) => {
  return <>
    {routes?.map((route, i) => (
    <Route key={i} path={route.path} element={lazyComp(route.component)}>
      {getRouteComp(route.children)}
    </Route>
  ))}
  </>
}

使用

./main.ts

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import RoutesDom from '@/routes/RoutesDom'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App><RoutesDom /></App>
  </StrictMode>
)

./App.tsx一级路由显示位置

function App(props: any) {
  return <>{props.children}</>
}

export default App

@/pages/Page1.tsx二级路由显示位置

import React from "react";

const Page1: React.FC<any> = (props) => {
  const { children } = props;
  return (
    <div>
      基础页面Page1
      {children}
    </div>
  )
}
export default Page1;