@omni-door/tpl-spa-react/lib/templates/source/routes.js

The React single-page-application project template

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.tpl_src_routes = void 0;
var utils_1 = require("@omni-door/utils");
var tpl = "`import { lazy, Suspense } from 'react';\nimport { Navigate, useRoutes } from 'react-router-dom';\nimport Home from './pages/home';\n${ts ? `/* import types */\nimport type {\n  ReactNode,\n  LazyExoticComponent,\n  ComponentType,\n  NamedExoticComponent,\n  PropsWithChildren\n} from 'react';\nimport type { RouteObject } from 'react-router-dom';\n` : ''}\n${ts ? `\nexport interface IRoute {\n  // \u662F\u5426\u9ED8\u8BA4\u8DEF\u7531 (default child routes)\n  index?: boolean;\n  // \u8DEF\u7531\u8DEF\u5F84 (The path for route)\n  path: string;\n  // \u8DEF\u7531\u5BF9\u5E94\u7684\u7EC4\u4EF6 (The render component for route)\n  element: LazyExoticComponent<ComponentType<any>> | NamedExoticComponent<any>;\n  // \u542F\u7528\u61D2\u52A0\u8F7D\u7684fallback (the fallback for lazy load)\n  fallback?: NonNullable<ReactNode> | null;\n  // \u5D4C\u5957\u8DEF\u7531 (nest route)\n  children?: IRoute[];\n  // \u91CD\u5B9A\u5411\u8DEF\u5F84 (redirect path)\n  redirect?: string;\n}\n` : ''}\nexport const _Element = (route${ts ? ': IRoute)' : ')'} => {\n  const _Suspense = ({ children }${ts ? ': PropsWithChildren<{}>)' : ')'} => route.fallback\n    ? <Suspense fallback={route.fallback}>\n      {children}\n    </Suspense>\n    : <>{children}</>;\n  return <_Suspense>\n    {\n      route.redirect\n        ? <Navigate to={route.redirect} replace />\n        : <route.element routes={route.children} />\n    }\n  </_Suspense>;\n};\n\nconst routes${ts ? ': IRoute[]' : ''} = [\n  {\n    path: '/',\n    element: Home\n  },\n  {\n    path: '/detail',\n    element: lazy(() => import('@pages/detail')),\n    fallback: <div> Loading Detail Page... </div>,\n    children: [\n      {\n        path: '/detail/:id',\n        element: lazy(() => import('@components/Detail')),\n        fallback: <div> Loading Detail Component... </div>\n      }\n    ]\n  }\n];\n\nexport const Routes = () => {\n  const getRoutes = (_routes${ts ? ': IRoute[]): RouteObject[]' : ')'} => {\n    return _routes.map(route => {\n      const { path, children } = route;\n      const element = <_Element {...route} />;\n      return {\n        path,\n        element,\n        children: getRoutes(children || [])\n      };\n    });\n  };\n  return useRoutes(getRoutes(routes));\n};\n\nexport default Routes;\n`";
exports.tpl_src_routes = {
    tpl: tpl
};
exports.default = utils_1.tplEngineInit(exports.tpl_src_routes, 'tpl');