React18(函数式开发)+Ts入门开发(二)路由配置以及路由

再此之前你已经学习了：
React18(函数式开发)+Ts入门开发(一)创建Ts项目使用SCSS、antdUI库

这第二讲讲讲怎么使用路由，以及路由懒加载（有的叫按需引入）。

一、安装react-router-dom并创建3个模块

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

创建 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;

二、创建路由模块

创建 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;

三、创建路由主页面

创建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