feat: update routes

package.json

@@ -10,7 +10,6 @@
     "@videojs/http-streaming": "^2.12.1",
     "m3u8-parser": "^4.7.0",
     "react": "^18.0.2",
-    "react-dom": "^18.0.2",
     "react-router-dom": "^6.2.1",
     "scheduler": "0.20.2",
     "video.js": "^7.17.0",

src/pages/main/index.tsx

@@ -1,5 +1,6 @@
 import { Link, Outlet } from "react-router-dom";
-import { routes, PageRoute } from "../../router";
+import { routes } from "../../router";
+import { PageRoute } from "../../types";
 import "./index.css";
 
 export const MainPage = () => {
@@ -10,7 +11,7 @@ export const MainPage = () => {
       <ul>
         {finalRoutes.map(({ path, title }) => (
           <li key={path}>
-            <Link to={path}>{title}</Link>
+            {path ? <Link to={path}>{title}</Link> : title}
           </li>
         ))}
       </ul>
@@ -23,9 +24,9 @@ export const CommonPageRouter = ({ routes }: { routes: PageRoute[] }) => {
     <div className="page">
       <section className="left">
         <ul>
-          {routes.filter(item => !item.hidden).map(({ title, path, element }) => (
+          {routes.filter(item => !item.hidden && !item.index).map(({ title, path, element }) => (
             <li key={path}>
-              <Link to={path}>{title}</Link>
+              {path ? <Link to={path}>{title}</Link> : title}
             </li>
           ))}
         </ul>

src/pages/react/index.tsx

@@ -1,18 +1,24 @@
 import { CommonPageRouter } from "../main"
 import { Suspense, lazy } from "react"
+import { PageRoute } from "../../types"
 
-
+const SimpleRedux = lazy(() => import('./redux'));
 const Scheduler = lazy(() => import('./scheduler'));
 const UseTransition = lazy(() => import('./useTransition'));
 const UseDeferredValue = lazy(() => import('./useDeferredValue'));
 const TestSuspense = lazy(() => import('./suspense'));
 const TestSwr = lazy(() => import('./swr'));
 const AHooks = lazy(() => import('./ahooks'));
 const Dob = lazy(() => import('./dob'));
-const UseCountdown  = lazy(() => import('./useCountdown'));
+const UseCountdown = lazy(() => import('./useCountdown'));
 
 
-export const children = [
+export let children: PageRoute[] = [
+  {
+    path: "redux",
+    element: <SimpleRedux></SimpleRedux>,
+    title: "redux 简单实现",
+  },
   {
     path: "scheduler",
     element: <Scheduler></Scheduler>,
@@ -55,6 +61,13 @@ export const children = [
   }
 ]
 
+// TIP: first element is default page,show as default router in outlet 
+children.unshift({
+  index: true,
+  element: children[0].element,
+  title: "default",
+})
+
 const ReactPage = () => {
   return <CommonPageRouter routes={children}></CommonPageRouter>
 };

src/pages/redux/index.tsx → src/pages/react/redux/index.tsx

@@ -8,7 +8,7 @@ import arrayThunk from "./mini-redux/custom-redux-array";
 
 let store = createStore(counterReducer, applyMiddleware(thunk, arrayThunk));
 
-export const ReduxPage = () => {
+export const SimpleRedux = () => {
   return (
     <div>
       <Provider store={store}>
@@ -19,4 +19,4 @@ export const ReduxPage = () => {
 };
 
 
-export default ReduxPage
+export default SimpleRedux

src/router/index.tsx

@@ -7,20 +7,13 @@ import { children as AnimateChildren } from "../pages/animation"
 import { children as CanvasChildren } from "../pages/canvas"
 import { children as WebpackChildren } from "../pages/webpack"
 import { Suspense, lazy } from "react"
-import { HashRouter, Route, Routes } from "react-router-dom";
+import { HashRouter, Route, Routes, } from "react-router-dom";
+import { PageRoute } from "../types";
 
-export type PageRoute = {
-  path: string;
-  element: React.ReactNode;
-  title: string;
-  hidden?: boolean;
-  children?: PageRoute[];
-};
 
 const ReactPage = lazy(() => import('../pages/react'));
 const VuePage = lazy(() => import('../pages/vue'));
 const WebpackPage = lazy(() => import('../pages/webpack'));
-const ReduxPage = lazy(() => import('../pages/redux'));
 const NodePage = lazy(() => import('../pages/node'));
 const VitePage = lazy(() => import('../pages/vite'));
 const MainPage = lazy(() => import('../pages/main'));
@@ -47,11 +40,6 @@ export const routes: PageRoute[] = [
     title: "react 相关",
     children: ReactChildren
   },
-  {
-    path: "/redux",
-    element: <ReduxPage></ReduxPage>,
-    title: "redux 相关",
-  },
   {
     path: "/vite",
     element: <VitePage></VitePage>,
@@ -95,25 +83,35 @@ export const routes: PageRoute[] = [
   },
 ]
 
-export const RouteContainer = () => (
-  <HashRouter>
-    <Routes>
-      {routes
-        .map((item) => (
-          <Route key={item.path} path={item.path} element={
-            <Suspense fallback={<div>Loading...</div>}>{item.element}</Suspense>
+export const RouteContainer = () => {
+
+  const genRoutes = (routes: PageRoute[]) => {
+    let finalRoutes = routes
+      .map((item) => {
+        const { path, element, children, index } = item
+        return !index ? <Route key={path} path={path} element={
+          <Suspense
+            fallback={<div > Loading...</div >}>
+            {element}
+          </Suspense >
+        }
+        >
+          {
+            children && children.length
+              ? genRoutes(children)
+              : null
           }
-          >
-            {item.children
-              ? item.children
-                .map(({ path, element }) => (
-                  <Route key={path} path={path} element={
-                    <Suspense fallback={<div>Loading...</div>}>{element}</Suspense>
-                  }></Route>
-                ))
-              : null}
-          </Route>
-        ))}
+        </Route > :
+          <Route key="index" index element={element} />
+      })
+
+    return finalRoutes
+  }
+
+
+  return <HashRouter>
+    <Routes>
+      {genRoutes(routes)}
     </Routes>
   </HashRouter>
-);
+}

src/types/index.ts

@@ -0,0 +1,8 @@
+export type PageRoute = {
+  path?: string;
+  element: React.ReactNode
+  title: string;
+  hidden?: boolean;
+  index?: boolean;
+  children?: PageRoute[];
+};