路由配置文件结构
代码
import React, { lazy } from "react";
import { RouteObject } from "react-router-dom";
// react懒加载
const Login = lazy(() => import("../views/login/Login"));
const Home = lazy(() => import("../views/home/Home"));
const Personal = lazy(() => import("../views/home/personal/Personal"));
const AllData = lazy(() => import("../views/home/alldata/AllData"));
import Index from "../views/index/Index";
const withLoadingComponent = (comp: JSX.Element) => (
<React.Suspense fallback={<div>Loading...</div>}>{comp}</React.Suspense>
);
const routes: Array<RouteObject> = [
{
path: "/",
element: <Index />,
},
{
path: "/login",
element: withLoadingComponent(<Login />),
},
{
path: "/*", //父子路由
element: withLoadingComponent(<Home />),
children: [
{
index: true,
path: "home",
element: <AllData />,
},
{
path: "personal",
element: <Personal />,
},
],
},
];
export default routes;
App.ts
import {
useRoutes,
} from "react-router-dom";
function App() {
// 路由出口
return useRoutes(router);
}
export default App;
main.ts
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter, HashRouter } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
Antd配置路由出口
Outlet //这里是子路由出口
import React, { useState } from "react";
import {
MenuFoldOutlined,
MenuUnfoldOutlined,
UploadOutlined,
UserOutlined,
VideoCameraOutlined,
BarChartOutlined,
SoundOutlined,
} from "@ant-design/icons";
import { Layout, Menu, Button, theme } from "antd";
import styles from "./home.module.scss";
import sim from "@/assets/sim.svg";
import { useNavigate, useRoutes, Outlet } from "react-router-dom";
import router from "../../router";
const { Header, Sider, Content } = Layout;
const Home: React.FC = () => {
const navigateTo = useNavigate();
// const outlet = useRoutes(router);
const [collapsed, setCollapsed] = useState(false);
const {
token: { colorBgContainer },
} = theme.useToken();
return (
<Layout style={{ width: "100vw", height: "100vh", color: "#fff" }}>
<Sider trigger={null} collapsible collapsed={collapsed}>
<div className={styles.logo}>
<img src={sim} alt="" style={{ width: "36px" }} />
<span
className={styles.title}
style={collapsed ? { display: "none" } : undefined}
>
智慧学习平台
</span>
</div>
<Menu
theme="dark"
mode="inline"
defaultSelectedKeys={["1"]}
onClick={({ key }) => {
console.log(key);
navigateTo(key);
}}
items={[
{
key: "home",
icon: <BarChartOutlined />,
label: "全站数据",
},
{
key: "2",
icon: <VideoCameraOutlined />,
label: "课程大厅",
},
{
key: "3",
icon: <UploadOutlined />,
label: "我的课程",
},
{
key: "4",
icon: <VideoCameraOutlined />,
label: "直播课",
},
{
key: "personal",
icon: <UserOutlined />,
label: "个人信息",
},
{
key: "6",
icon: <SoundOutlined />,
label: "消息",
},
{
key: "7",
icon: <UploadOutlined />,
label: "管理中心",
children: [
{
key: "/admin/course",
label: "课程管理",
},
{
key: "/admin/student",
label: "学生管理",
},
{
key: "/admin/homework",
label: "作业",
},
],
},
]}
/>
</Sider>
<Layout>
<Header style={{ padding: 0, background: colorBgContainer }}>
<Button
type="text"
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
onClick={() => setCollapsed(!collapsed)}
style={{
fontSize: "16px",
width: 64,
height: 64,
}}
/>
</Header>
<Content
style={{
margin: "24px 16px",
padding: 24,
minHeight: 280,
color: "red",
background: colorBgContainer,
}}
>
<Outlet /> //这里是子路由出口
</Content>
</Layout>
</Layout>
);
};
export default Home;