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;
3.安装andt
官方文档:快速上手 - Ant Design
yarn add antd
后面忘记整理了,以后如果有机会再说吧。。。。。。