chore: browser router

package.json

@@ -23,6 +23,8 @@
   "type": "module",
   "devDependencies": {
     "@mdx-js/rollup": "^3.0.0",
+    "@prerenderer/renderer-puppeteer": "^1.2.2",
+    "@prerenderer/rollup-plugin": "^0.3.7",
     "@shlab/fabric": "^1.2.1",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",

src/App.tsx

@@ -3,7 +3,5 @@ import RouterContainer from '@/components/router-container';
 import routes from './routes';
 
 export default function App() {
-  return (
-    <RouterContainer routes={routes} />
-  );
+  return <RouterContainer routes={routes} basename="/labelU" />;
 }

src/components/router-container/index.tsx

@@ -4,7 +4,7 @@
  */
 import React, { useEffect, useMemo } from 'react';
 import type { RouteObject, UIMatch } from 'react-router-dom';
-import { createHashRouter, createRoutesFromElements, Route, RouterProvider, useMatches } from 'react-router-dom';
+import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider, useMatches } from 'react-router-dom';
 
 export type RouteWithParent = RouteObject & {
   parent: RouteWithParent | null;
@@ -66,9 +66,19 @@ export interface RouterProps {
   basename?: string;
 }
 
-export default function RouterContainer({ routes }: RouterProps) {
-  const router = useMemo(() => createHashRouter(createRoutesFromElements(mapRoutes(routes))), [routes]);
+export default function RouterContainer({ routes, basename }: RouterProps) {
+  const router = useMemo(
+    () =>
+      createBrowserRouter(createRoutesFromElements(mapRoutes(routes)), {
+        basename,
+      }),
+    [routes, basename],
+  );
   const fallback = <div style={{ width: '100vw', marginTop: '40vh' }}> loading </div>;
 
+  useEffect(() => {
+    document.dispatchEvent(new Event('custom-render-trigger'));
+  }, []);
+
   return <RouterProvider router={router} fallbackElement={fallback} />;
 }

src/layouts/main/index.tsx

@@ -1,7 +1,7 @@
 import { Link, Outlet, useLocation, useMatch, useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
 import { BiLinkExternal } from '@react-icons/all-files/bi/BiLinkExternal';
-import { BiBookContent } from '@react-icons/all-files/bi/BiBookContent';
+import { BiBookOpen } from '@react-icons/all-files/bi/BiBookOpen';
 import { BiCodeCurly } from '@react-icons/all-files/bi/BiCodeCurly';
 import { AiOutlineGithub } from '@react-icons/all-files/ai/AiOutlineGithub';
 import { HiTranslate } from '@react-icons/all-files/hi/HiTranslate';
@@ -18,7 +18,7 @@ const links = [
   {
     title: i18nLocale.t('guide'),
     path: 'guide',
-    icon: <BiBookContent />,
+    icon: <BiBookOpen />,
   },
   {
     title: i18nLocale.t('schema'),

vite.config.ts

@@ -1,5 +1,6 @@
 import { resolve } from 'path';
 
+// import prerender from '@prerenderer/rollup-plugin';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import mdx from '@mdx-js/rollup';
@@ -15,7 +16,25 @@ export default defineConfig({
     include: ['react/jsx-runtime'],
   },
 
-  plugins: [{ enforce: 'pre' as const, ...mdx() }, react(), svgr(), ViteEjsPlugin()].filter(Boolean),
+  plugins: [
+    { enforce: 'pre' as const, ...mdx() },
+    react(),
+    svgr(),
+    ViteEjsPlugin(),
+    // prerender({
+    //   routes: ['/', '/guide/install/windows', '/guide/install/macos', '/schema/image/point'],
+    //   renderer: '@prerenderer/renderer-puppeteer',
+    //   rendererOptions: {
+    //     renderAfterDocumentEvent: 'custom-render-trigger',
+    //   },
+    //   postProcess(renderedRoute) {
+    //     // Replace all http with https urls and localhost to your site url
+    //     renderedRoute.html = renderedRoute.html
+    //       .replace(/http:/i, 'https:')
+    //       .replace(/(https:\/\/)?(localhost|127\.0\.0\.1):\d*/i, process.env.CI_ENVIRONMENT_URL || '');
+    //   },
+    // }),
+  ].filter(Boolean),
   resolve: {
     alias: {
       '@': resolve(__dirname, 'src/'),