📐

Outlet을 이용한 서브메뉴

•

To-Do의 라우팅 구성

◦

BasicMenu.js

import { Link } from "react-router-dom";
const BasicMenu = () => {
    return (
        <nav id='navbar' className=" flex bg-blue-300">
            <div className="w-4/5 bg-gray-500" >
                <ul className="flex p-4 text-white font-bold">
                    <li className="pr-6 text-2xl">
                        <Link to={'/'}>Main</Link>
                    </li>
                    <li className="pr-6 text-2xl">
                        <Link to={'/about'}>About</Link>
                    </li>
                    <li className="pr-6 text-2xl">
                        <Link to={'/todo/'}>Todo</Link>
                    </li>
                </ul>
            </div>
            <div className="w-1/5 flex justify-end bg-orange-300 p-4 font-medium">
                <div className="text-white text-sm m-1 rounded" >Login</div>
            </div>
        </nav>
    );
}
export default BasicMenu;
JavaScript
복사

◦

BasicLayout.js 수정

import BasicMenu from "../components/menus/BasicMenu";

const BasicLayout = ({ children }) => {
    return (
        <>
            <header className="bg-teal-400 p-5">
                <BasicMenu />
            </header>
            <div className="bg-white my-5 w-full flex flex-col space-y-1 md:flex-row md:space-x-1 md:space-y-0">
                <main className="bg-sky-300 md:w-4/5 lg:w-3/4 px-5 py-5">      {/* 상단 여백 py-40 변경 flex 제거 */}
                    {children}
                </main>
                <aside className="bg-green-300 md:w-1/5 lg:w-1/4 px-5 flex py-5"> {/* 상단 여백 py-40 변경 flex 제거 */}
                    <h1 className="text-2xl md:text-4xl"> Sidebar </h1>
                </aside>
            </div>
        </>
    );
}
export default BasicLayout;
JavaScript
복사

◦

IndexPage.js

import React from "react";
import BasicLayout from "../BasicLayout";
import { Outlet } from "react-router-dom";

function IndexPage(props) {
    return (
        <BasicLayout>
            <div className="w-full flex m-2 p-2 ">
                <div className="text-xl m-1 p-2 w-20 font-extrabold text-center underline">LIST</div>
                <div className="text-xl m-1 p-2 w-20 font-extrabold text-center underline">ADD</div>
            </div>
            <div className="flex flex-wrap w-full">
                <Outlet />              {/* 서브 메뉴 잡을 때 사용*/}
            </div>
        </BasicLayout>
    );
}

export default IndexPage;
JavaScript
복사

◦

ListPage.js

import React from 'react';

function ListPage(props) {
    return (
        <div className="p-4 w-full bg-orange-200 ">
            <div className="text-3xl font-extrabold">
                Todo List Page Component
            </div>
        </div>
    );
}

export default ListPage;
JavaScript
복사

◦

root.js

import { Suspense, lazy } from "react";

const { createBrowserRouter } = require("react-router-dom");

const Loading = <div className={'bg-red-700'}>Loading....</div>
const Main = lazy(() => import("../pages/MainPage"))

const About = lazy(() => import("../pages/AboutPage"))

const TodoIndex = lazy(() => import("../pages/todo/IndexPage"))

const TodoList = lazy(() => import("../pages/todo/ListPage"))

const root = createBrowserRouter([
    {
        path: "",
        element: <Suspense fallback={Loading}><Main/></Suspense>
    },
    {
        path: "about",
        element: <Suspense fallback={Loading}><About/></Suspense>
    },
    {
        path: "todo",
        element: <Suspense fallback={Loading}><TodoIndex /></Suspense>,
        children: [
            {
                path: 'list',
                element: <Suspense fallback={Loading}><TodoList /></Suspense>
            }
        ]
    }
])
export default root;
JavaScript
복사