React + ts + react-router-dom + andt + hooks（没写完）

本文链接：https://blog.youkuaiyun.com/Lycoris_Red/article/details/119137534

1.创建react + ts 项目

create-react-app react-demo --template typescript

2.安装路由

yarn add react-router-dom

//ts环境下需要安装,不然不能识别react-router-dom
yarn add @types/react-router-dom

配置路由懒加载：src/router/index.ts

import React, { lazy } from 'react';


// 路由类型
type TRouter = {
    title: string,
    path: string,
    key: string,
    component: React.LazyExoticComponent<any>,
    children?:TRouter[]//子路由
};

const router: TRouter[] = [
    {
        title: '登录',
        path: '/Login',
        key: 'Login',
        component:lazy(() => import('../views/login'))
    },
    {
        title: '首页',
        path: '/Home',
        key: 'Home',
        component: lazy(() => import('../views/home'))
    },
];

export default router;

app.tsx 遍历路由

import React, { Suspense } from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import './App.css';
import router from './router';
function App() {
    return (
        <div className="App">
            <BrowserRouter>
                {/* 懒加载 Suspense包裹*/}
                <Suspense fallback={<div>Loading...</div>}>
                    <Switch>
                        {router.map((item) => (
                            <Route key="item.key" path={item.path} component={item.component} />
                        ))}
                        <Redirect path="/*" to="/Login"></Redirect>
                    </Switch>
                </Suspense>
            </BrowserRouter>
        </div>
    );
}

export default App;