crootfast/template/apps/react18/src/pages/app.jsx

大前端工程化命令行脚手架

import { useEffect, useMemo } from "react";
import { useLocation } from 'react-router-dom';
import { returnRouterConfig } from "@/routers";
import routesConfig from "@/routers/routesConfig";
import routesComponent from "@/routers/routesComponent";
import { queryModuleFederation } from "@/stores/moduleFederation";
import styles from "./app.less";
import useReactive from "@/common/hooks/useReactive";
import { get } from "lodash-es";

export default function App(props = {}) {
  const AsyncProdsComponent = useMemo(() => {
    return queryModuleFederation("prods");
  }, []);
  // const AsyncTempsComponent = useMemo(() => {
  //   return queryModuleFederation("components");
  // }, []);

  AsyncProdsComponent.useHistoryChange({
    routesConfig: returnRouterConfig(routesConfig, routesComponent)
  });

  const dataSourceMenus = useReactive({
    sourceMenus: []
  });
  // useEffect(() => {
  //   viewData.currentMenuId = get(viewData.menus, '0.pageId');

  //   return () => { };
  // }, []);

  const { viewData } = AsyncProdsComponent.LayoutHeaderAndMenuLeft.useGetMenuViewData(dataSourceMenus.sourceMenus);
  // const location = useLocation()
  // useEffect(() => {
  //   let CurPageId = get(viewData.menus, '0.pageId')
  //   // todo 需要根据当前的路由匹配pageId
  //   if (location.pathname) {
  //     const pathArr = filter(location.pathname.split('/'), it => it)
  //     CurPageId = find(menus, (it) => it.path === get(pathArr, '0.path'))?.pageId
  //   }
  //   viewData.currentMenuId = CurPageId

  // }, [location.pathname]);

  return (
    <>
      <section className={`${styles.headerWrapper ?? ''}`}>
        <AsyncProdsComponent.LayoutHeaderAndMenuLeft.Header viewData={viewData} />
      </section>
      <section className={`${styles.routerComponentWrapper ?? ''}`}>
        <AsyncProdsComponent.SwitchTabRoutes sourceMenus={dataSourceMenus.sourceMenus} />
      </section>
      <section className={`df ${styles.viewportContentWrapper}`}>
        <div className="df leftMenuWrapper">
          <AsyncProdsComponent.LayoutHeaderAndMenuLeft.Left viewData={viewData} />
        </div>
        <div className="df oys contentWrapper">
          <AsyncProdsComponent.TabRouterComponent />
        </div>
      </section>
    </>
  );
}