1. router layout 분기처리

router/index.js

import { useRoutes } from 'react-router-dom';
const IntroPage = lazy(() => import('./IntroPage'));
const Main = lazy(() => import('./Main'));
const Layout1 = lazy(() => import('./Layout1'));
const Layout2 = lazy(() => import('./Layout2'));

const Router = () => {
    return useRoutes([
        {
            path: '/',
            element: (
                <IntroPage>
                    {/* 레이아웃 분기처리 */}
                    {isChecked => isChecked ? <Layout1 /> : <Layout2 />}
                </IntroPage>
            ),
            children: [
                {
                    index: true,
                    element: <Main/>,
                },
                // ...
            ],
        }
    ])
}

IntroPage.js

import { useEffect, useState } from 'react';
import { isMobile } from 'react-device-detect';
import { useLocation, useNavigate } from 'react-router-dom';
// ...

const IntroPage = ({ children }) => {
    // ...
    
    if (isLoading) return <></>
    
    return <>{children(!!id)}</>
}

export default IntroPage;