Update docs and sort content

src/content/post/how to generate the path like router config.md

@@ -0,0 +1,170 @@
+---
+title: how to generate the path like router config in vite + react + react-router project
+date: 2025-01-14
+author: KazooTTT
+type: Post
+status: Published
+tags: [react, vite, react-router, vite-plugin-pages]
+finished: true
+published: true
+category: frontend
+slug: how-to-generate-the-path-like-router-config-in-vite-react-react-router-project
+description: 
+toAstro: true
+---
+
+when i use react-router and vite, i want to config my router in the router.config.ts file and also generate some config for the target path dir.
+
+config the router in the router.config.ts file is easy, but how to generate the path like router config for the target path dir? and combine the self config and automatically generated config together, finally use it in the react router?
+
+we can split the problem into these parts:
+
+1. generate the path like router config for the target path dir
+2. combine the self config and automatically generated config together
+3. use it in the react router
+
+## 1. generate the path like router config for the target path dir
+
+there is one package called `vite-plugin-pages`, which can help us generate the path like router config for the target path dir.
+
+how to use it?
+
+step 1. in the vite + react + react-router project, install the `vite-plugin-pages` package. 
+
+  ```
+  pnpm install vite-plugin-pages --save-dev
+  ```
+
+step 2. add the `vite-plugin-pages` plugin in the vite config file.
+
+  ``` ts
+  import Pages from "vite-plugin-pages";
+  import { defineConfig } from "vite";
+
+  // https://vite.dev/config/
+  export default defineConfig({
+    plugins: [
+      // ...
+      Pages({
+        dirs: 'src/views',
+      })
+      // ...
+    ],
+  });
+  the default dirs of the `vite-plugin-pages` plugin is `src/pages`, you can change it by the `dir` option. 
+
+  we set it to `src/views` in the example.
+  ```
+
+  ![alt text](https://pictures.kazoottt.top/2025/01/20250114-58239a4616583a9f4659dcfb8dd5dba8.png)
+
+  it has some other options, you can see the [official docs](https://github.com/hannoeru/vite-plugin-pages).
+
+step 3. get the path like router config for the target path dir. 
+
+  ``` tsx
+  import routes from "~react-pages";
+
+  function App() {
+    const routeElements = useRoutes(routes);
+    return (
+      <MainLayout>{routeElements}</MainLayout>
+    );
+  }
+  ```
+
+  then we can view the target path which is related to the target path dir.
+
+step 4. (option) generate the sidebar to show the levels of the path.
+
+  ``` tsx
+  import { useState } from "react";
+  import { RouteObject, useLocation, useNavigate } from "react-router-dom";
+  import routes from "~react-pages";
+
+  function Sidebar() {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const renderMenuItem = (route: RouteObject) => {
+      const isActive = location.pathname === "/" + route.path;
+
+      return (
+        <div
+          key={route.path}
+          onClick={() => {
+            if (route.path) {
+              navigate(route.path);
+            }
+          }}
+          className={`p-2 cursor-pointer ${
+            isActive ? "bg-blue-100 text-blue-600" : "bg-transparent text-black"
+          } transition-all duration-300`}
+        >
+          {route.path}
+        </div>
+      );
+    };
+
+    return (
+      <div
+        className={`flex flex-col ${
+          isCollapsed ? "w-12" : "w-52"
+        } h-full bg-white border-r border-gray-200 transition-width duration-300 relative`}
+      >
+        <button
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          className="absolute right-[-12px] top-5 w-6 h-6 rounded-full border border-gray-200 bg-white cursor-pointer z-10"
+        >
+          {isCollapsed ? ">" : "<"}
+        </button>
+
+        {!isCollapsed && (
+          <>
+            <div className="py-4 flex-1">{routes.map(renderMenuItem)}</div>
+          </>
+        )}
+      </div>
+    );
+  }
+
+  export default Sidebar;
+
+  ```
+
+## 2. combine the self config and automatically generated config together
+
+since the dirs of the `vite-plugin-pages` plugin is `src/views`, so we can combine the self config and automatically generated config together.
+
+we need to create a dir which is not in the `src/views` dir(such as `src/pages`)
+
+``` tsx
+import routes from "~react-pages";
+import HomePage from 'src/views/home/index.tsx';
+
+const pathsRouterConfig = routes
+const pathsManualConfig = [
+  {
+    path: '/home',
+    component: <HomePage/>,
+  },
+]
+
+const finalRouterConfig = [...pathsRouterConfig, ...pathsManualConfig]
+```
+
+## 3. use it in the react router
+
+the use way is the same as the react-router
+
+``` tsx
+import routes from "~react-pages";
+
+function App() {
+  const routeElements = useRoutes(routes);
+  return (
+    <MainLayout>{routeElements}</MainLayout>
+  );
+}
+```