初衷
因接手的项目前端采用reactjs+antd,为把控项目中的各个细节,所以想做一些整理,以免后期遗忘。
创建及启动项目
# 全局安装create-react-app
# 如果曾经安装过,可先移除: npm uninstall -g create-react-app
npm install -g create-react-app
# 创建项目sysmgmt
npx create-react-app sysmgmt --template typescript
# 进入项目目录
cd sysmgmt
# 启动
npm start
为项目增加路由功能
安装依赖
# 安装react-router-dom
npm install --save react-router-dom @types/react @types/react-dom @types/react-router
添加及修改相关文件
@/src/routes/index.tsx
import { lazy, LazyExoticComponent } from 'react';
export type RouterType = {
path: string,
component: LazyExoticComponent<() => JSX.Element>,
}[]
const Routers: RouterType = [{
path: 'home',
component: lazy(() => import ('../pages/Home'))
},{
path: 'details',
component: lazy(() => import ('../pages/Details'))
},]
export default Routers
@/src/App.tsx
import React, { Suspense } from 'react'
import './App.css';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import Routers from './routes';
import Loading from './components/Loading';
import BasicLayout from './layout/BasicLayout';
function App() {
return (
<BrowserRouter>
<Suspense fallback={<Loading />}>
<Routes>
<Route path='/' element={<BasicLayout />}>
{
Routers.map(router => {
return (
<Route
key={router.path}
path={router.path}
element={<router.component />}
>
</Route>
)
})
}
<Route path='' element={<Navigate to={'home'}/>}/>
</Route>
</Routes>
</Suspense>
</BrowserRouter>
);
}
export default App;
项目源码
参考资料
https://www.jianshu.com/p/727d836d1d47
https://cloud.tencent.com/developer/article/1842697
https://cloud.tencent.com/developer/article/2098078