web2468/src/App.js

// GA
import ReactGA from 'react-ga4';

// utils
import {lazy, Suspense} from 'react';

// styles
import ThemeStyles from '@styles/theme';
import './style.scss';

// libs styles
import 'react-toastify/dist/ReactToastify.min.css';
import 'react-grid-layout/css/styles.css';
import 'swiper/css';
import 'swiper/css/effect-fade';
import 'swiper/css/pagination';

// fonts
import '@fonts/icomoon/icomoon.woff';

// contexts
import {SidebarProvider, useSidebar} from '@contexts/sidebarContext';
import {ThemeProvider} from 'styled-components';

// hooks
import {useThemeProvider} from '@contexts/themeContext';
import {useEffect, useRef} from 'react';
import {useWindowSize} from 'react-use';
import useAuthRoute from '@hooks/useAuthRoute';

// utils
import {StyleSheetManager} from 'styled-components';
import {ThemeProvider as MuiThemeProvider, createTheme} from '@mui/material/styles';
import {preventDefault} from '@utils/helpers';
import rtlPlugin from 'stylis-plugin-rtl';
import {CacheProvider} from '@emotion/react';
import createCache from '@emotion/cache';

// components
import {BrowserRouter, HashRouter, Route, Routes, useLocation} from 'react-router-dom';
import {ToastContainer} from 'react-toastify';
import Layout from "@layout/Layout";
import {getFetchStatus} from '@features/mainSlice';
import {useDispatch, useSelector} from "react-redux";
import {REQ_STATUS} from "@api/config";
import {reqGetRoutes} from "@features/api";
import LoadingScreen from "@components/LoadingScreen";


const App = () => {
    const dispatch = useDispatch();
    const fetchStatus=useSelector(getFetchStatus);
    const appRef = useRef(null);
    const {theme, direction} = useThemeProvider();
    const gaKey = process.env.REACT_APP_PUBLIC_GA;
    gaKey && ReactGA.initialize(gaKey);

    // auto RTL support for Material-UI components and styled-components

    const plugins = direction === 'rtl' ? [rtlPlugin] : [];

    const muiTheme = createTheme({
        direction: direction,
    });

    const cacheRtl = createCache({
        key: 'css-rtl',
        stylisPlugins: plugins,
    });
    const startReqRoutes=()=>{
        dispatch(reqGetRoutes());
    }
    useEffect(() => {
        // scroll to top on route change
        //请求routes
        startReqRoutes();
        appRef.current && appRef.current.scrollTo(0, 0);
        preventDefault();
    }, []);
    const renderLayout=()=>{
        return (
            <>
                {
                    fetchStatus==REQ_STATUS.IDLE?<Layout />:(<LoadingScreen />)
                }
            </>
        )
    }
    // return (
    //     <CacheProvider value={cacheRtl}>
    //         <MuiThemeProvider theme={muiTheme}>
    //             <SidebarProvider>
    //                 <ThemeProvider theme={{theme: theme}}>
    //                     <ThemeStyles/>
    //                     <ToastContainer theme={theme} autoClose={2500}
    //                                     position={direction === 'ltr' ? 'top-right' : 'top-left'}/>
    //                     <StyleSheetManager stylisPlugins={plugins}>
    //                         {
    //                             renderLayout()
    //                         }
    //                     </StyleSheetManager>
    //                 </ThemeProvider>
    //             </SidebarProvider>
    //         </MuiThemeProvider>
    //     </CacheProvider>
    // );
    return (
        <CacheProvider value={cacheRtl}>
            <MuiThemeProvider theme={muiTheme}>
                <ThemeProvider theme={{theme: theme}}>
                    <SidebarProvider>
                        <ThemeStyles/>
                        <ToastContainer theme={theme} autoClose={2500}
                                        position={direction === 'ltr' ? 'top-right' : 'top-left'}/>
                        <StyleSheetManager stylisPlugins={plugins}>
                            {
                                renderLayout()
                            }
                        </StyleSheetManager>
                    </SidebarProvider>
                </ThemeProvider>
            </MuiThemeProvider>
        </CacheProvider>
    );
}

export default App