Inflearn Community Q&A
asked
outlet을 이용한 서브메뉴 강의에서 질문있습니다.
Written on
·
54
·
Edited
0
outlet을 이용한 서브메뉴에서 질문있습니다.
main <-이 부분이 부모페이지고
list add <-서브페이지면
list page component<-자손페이지 인가요?
강의에서 IndexPage.js에서 <Outlet/> 부분에 ListPage.js 코드가 들어가 있는 형태인거 같은데요.
근데 제가 아래처럼 작동해봤을 떄 Todo List Page Component 이 부분이 안나오는데요.
코드 어디가 문제인가요? 코드 복붙했는데요.
아래는 IndexPage.js 코드입니다.
import { Outlet } from "react-router-dom";
import BasicLayout from "../../layouts/BasicLayout";
const IndexPage = () => {
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;
아래는 ListPage.js 코드입니다.
import React from 'react'
export default function ListPage() {
return (
<div className="p-4 w-full bg-orange-200 ">
<div className="text-3xl font-extrabold">
Todo List Page Component
</div>
</div>
)
}
Answer 1
0
올려주신 코드에서는 components폴더가 layout폴더 내부에 있네요..
src/components/menus/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>
</nav>
);
}
export default BasicMenu;src/layouts/BasicLayout.js
import BasicMenu from "../components/menus/BasicMenu";
const BasicLayout = ({children}) => {
return (
<>
{/* 기존 헤더 대신 BasicMenu*/ }
<BasicMenu/>
{/* 상단 여백 my-5 제거 */}
<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;
기타 조금씩 수정할 내용들이 있긴 합니다.
혹시 문제가 해결되지 않으시면 마지막 섹션에 있는 수업자료를 확인해 주세요.