vue 已经很熟悉。react 虽然也用过，但是对于整体的搭建还不是很熟。这次就使用 react-redux(^8.0.5) 和 react-router(^6.11.2)，
结合上次的《从零搭建前端工程》，搭建一个基础的 react 项目。加上一点注释，后面有用到也可以代码直接拷。
代码仓库：github。
一、Router
当前最新版本为 v6，据说有些大改动，旧版本请参考《升级指南》。
路由文件声明：
import { createBrowserRouter, Navigate } from 'react-router-dom';
import Home from '@/views/Home';
import NotFound from '@/views/NotFound';
const router = createBrowserRouter([
{
path: '/home',
element: <Home />,
},
{
path: '/game',
// element: <CardGame />,
async lazy() { // 路由页面懒加载，也就是真的访问到再下载，打包也是独立的 js
const comp = await import('@/views/CardGame');
// 这里的 default 是 webpack 的处理，会把 export default 挂在 default 属性上
return { Component: comp.default };
},
},
{
path: '/demo/:id',
// element: <Demo />,
async lazy() {
// 注意：这里要 loader 结果返回，才会渲染组件。也就是会阻塞页面。
const comp = await import('@/views/Demo');
return { Component: comp.default, loader: comp.loader };
},
},
{
path: '/', // v6 的重定向改为 Navigate 组件
element: <Navigate to={'/home'}/>,
},
{
path: '*', // 404页面兜底，我觉得改成和上面的一样的重定向处理应该也可以
element: <NotFound />,
},
]);
export default router;
然后路由声明对象的使用：
import { RouterProvider } from 'react-router-dom';
import router from '@/router';
function App() {
return (
<RouterProvider router={router} />
);
}
export default App;
