本文主要讲解三大部分内容，使用 vite 创建 react 项目、react-router v5 到 v6 迁移指南、在 vite 当中使用动态异步加载组件
使用 vite 创建 react 项目
# npm 6.x
npm create vite@latest my-react-app --template react
# npm 7+, extra double-dash is needed:
npm create vite@latest my-react-app -- --template react
# yarn
yarn create vite my-react-app --template react
# pnpm
pnpm create vite my-react-app -- --template react
使用上述命令任选其一方式可快速创建一个 react 项目
cd my-react-app && npm i && npm run dev
运行此命令即可在 localhost:3000 中打开一个新建好的 react 模版页面
react-router v5 到 v6 迁移指南
区别
先说区别然后才好确定如果进行迁移（注：只是对常用的组件和 api）
- Routes v5 -> v6 删除了 switch 组件由 Routes 组件替换
- Route v5 -> v6 删除了 component、render 属性由 element 替换
- Navigate v5 -> v6 删除了 Redirect 组件由 Navigate 组件替换
- 占位符 v5 -> v6 v6 仅支持 * 通配符和动态 :id 形式
- 新增 Outlet 组件，解决多级路由出口不再使用 children 进行传递
- 其他常用无太大变化
迁移
- 把项目中 switch 组件全部替换成 Routes 组件
- 替换 Route 的 component、render 属性为 element
- 重定向由下面方式进行替换
<Route path='/' element={<Navigate to='/to' />} />
- 替换组件内所有通过 props.children 传递自组建的方式，全部使用
<Outlet />
在 vite 当中使用动态异步加载组件
在使用路由当中目前主流大部分脚手架都在使用约定式路由，基本使用 import()或者 require().default 引用组件，在 vite 当中这两种方式因为构建方式问题是不支持的，所以需要下文方式进行引入
import React from 'react';
import { Spin } from 'antd';
// 这里的路径用了 ../pages/* 就是加载所有当前文件平级的文件夹下的所有文件
const modules = import.meta.glob('../pages/*');
export default () => {
// 匹配modules里面的key，得到对应的value就是异步加载组件的函数
const Compontents = React.lazy(modules['../pages/home/index.tsx'] as any);
return (
<React.Suspense
fallback={<div style={{
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}><Spin size="large" /></div>}
>
<Compontents />
</React.Suspense>
);
}
import.meta.glob 引入方式参考 vite 中文官网
