自己建立公司网站的步骤_个人网站设计与实现结论_seo系统培训班_近日发生的重大新闻

路由标签

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;