refactor: 提取 route 逻辑

Author: crazyurus

.eslintrc.json

@@ -3,12 +3,7 @@
     "browser": true,
     "es2021": true
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier"
-  ],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier"],
   "overrides": [],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -20,7 +15,8 @@
     "indent": ["error", 2],
     "linebreak-style": ["error", "unix"],
     "quotes": ["error", "single"],
-    "semi": ["error", "always"]
+    "semi": ["error", "always"],
+    "react/prop-types": "off"
   },
   "ignorePatterns": ["config/*.js"]
 }

.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx --no -- commitlint -g ./config/commitlint.js --edit 
+npx commitlint -g ./config/commitlint.js --edit

README.md

@@ -6,9 +6,10 @@
 
 - 基于 `carco` 来定制 Webpack 配置
 - 支持 TypeScript
+- 支持配置式路由
 - 移除了测试和 `WebVital` 相关代码
 - 包管理器替换为 `pnpm`
-- 添加了 `scss` 和 CSS Modules 的支持
+- 添加了 `sass` 和 CSS Modules 的支持
 - 添加了性能分析命令
 - 添加了 `eslint` `stylelint` `prettier`
 - 添加了 `husky` `lint-staged` 以 commit 时检查
@@ -51,7 +52,8 @@ $ npm install pnpm -g
 
 - 公共组件放在 `components` 下
 - 页面组件放在 `pages` 下
-- 路由配置在 `Router.tsx` 中
+- 布局组件放在 `layouts` 下
+- 路由配置在 `routes.ts` 中
 
 ## FAQ
 

src/App.tsx

@@ -1,7 +1,21 @@
 import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
-import { Layout } from './components';
-import Router from './Router';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Layout from './layouts/Basic';
+import NotFound from './pages/Error/404';
+import routes from './routes';
+
+function Router(): JSX.Element {
+  return (
+    <Routes>
+      {routes.map((props) => {
+        const { path, page: Page } = props;
+
+        return <Route key={path} element={<Page />} {...props} />;
+      })}
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+}
 
 function App(): JSX.Element {
   return (

src/Router.tsx

@@ -1,3 +1,2 @@
 export { default as Logo } from './Logo';
 export { default as Link } from './Link';
-export { default as Layout } from './Layout';

src/components/index.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function NotFound(): JSX.Element {
+  return <div>Not found</div>;
+}
+
+export default NotFound;

src/components/Layout/index.scss src/layouts/Basic/index.scss

@@ -7,7 +7,7 @@ function Home(): JSX.Element {
     <div className={styles.container}>
       <Logo />
       <p>
-        Edit <code>src/App.tsx</code> and save to reload.
+        Edit <code>src/pages/Home/index.tsx</code> and save to reload.
       </p>
       <Link url="https://reactjs.org">Learn React</Link>
     </div>

src/components/Layout/index.tsx src/layouts/Basic/index.tsx

@@ -0,0 +1,16 @@
+import type { PathRouteProps } from 'react-router-dom';
+import Home from './pages/Home';
+
+interface Route extends PathRouteProps {
+  path: string;
+  page(): JSX.Element;
+}
+
+const routes: Route[] = [
+  {
+    path: '/',
+    page: Home,
+  },
+];
+
+export default routes;