再此之前你已經(jīng)學(xué)習(xí)了：
React18(函數(shù)式開發(fā))+Ts入門開發(fā)(一)創(chuàng)建Ts項目使用SCSS、antdUI庫

這第二講講講怎么使用路由，以及路由懶加載（有的叫按需引入）。

一、安裝react-router-dom并創(chuàng)建3個模塊

// react-router-dom: 6.3.0 此時新版本是6.3.X 所以路由寫法為 v6寫法，和v5有些出入
npm install react-router-dom

創(chuàng)建 home、about、notFound(404) 3個模塊

/* src\views\home\index.tsx */
import { Button } from "antd";
import { Link } from "react-router-dom";
function home() {
    return (
        <div className="home">
            我是homePage
            <Button type="primary">
                <Link to="/about">前往aboutPage</Link>
            </Button>
        </div>
    );
}

export default home;

/* src\views\about\index.tsx */
import { Button } from "antd";
import { Link } from "react-router-dom";
function about() {
    return (
        <div className="home">
            我是aboutPage
            <Button type="primary">
                <Link to="/">前往homePage</Link>
            </Button>
            <br /><br />
            <Button type="primary">
                <Link to="/404">前往404</Link>
            </Button>
        </div>
    );
}

export default about;

/* src\views\notFound\index.tsx */
import { Result, Button } from "antd";
import { Link } from "react-router-dom";
function notFound() {
    return (
        <Result
            status="404"
            title="404"
            subTitle="Sorry, the page you visited does not exist."
            extra={
                <Button type="primary">
                    <Link to="/">回到首頁</Link>
                </Button>
            }
        ></Result>
    );
}
export default notFound;

二、創(chuàng)建路由模塊

創(chuàng)建 src\router\index.tsx

// 使用路由懶加載
import { lazy } from "react";
// 引入組件
const home = lazy(() => import("../views/home"));
const about = lazy(() => import("../views/about"));
const notFound = lazy(() => import("../views/notFound"));
const routes = [
    // home
    {
        path: "/",
        component: home,
    },
    // about
    {
        path: "/about",
        component: about,
    },
    // 404
    {
        path: "*",
        component: notFound,
    },
];
export default routes;

三、創(chuàng)建路由主頁面

創(chuàng)建src\views\index.tsx

import { Suspense } from "react";
import { HashRouter as Router, Routes, Route } from "react-router-dom";

import routers from "../router";
const LayoutCom = () => {
    return (
        <Suspense fallback={<>loading ...</>}>
            <Router>
                <Routes>
                    {routers.map((item, index) => {
                        return (
                            <Route
                                key={index}
                                path={item.path}
                                element={<item.component />}
                            />
                        );
                    })}
                </Routes>
            </Router>
        </Suspense>
    );
};
export default LayoutCom;

四、修改App.tsx

// app.tsx
import "./App.scss";
import LayoutCom from "./views";
function App() {
    return (
        <div className="App">
            <LayoutCom />
        </div>
    );
}

export default App;

啟動yarn start | npm run start