outlet을 이용한 서브메뉴 강의에서 질문있습니다.
90
192 asked
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;
기타 조금씩 수정할 내용들이 있긴 합니다.
혹시 문제가 해결되지 않으시면 마지막 섹션에 있는 수업자료를 확인해 주세요.
동일하게 실습하는데 이상하게 페이지를 찾지 못하네요..
0
72
2
22. REST 방식 컨트롤러 만들기(2), 29. 등록처리 부분 질문이 있습니다.
0
74
2
37강. 강의수업듣다 질문드립니다.
0
56
2
TodoDTO test 함수
0
80
3
강사님 오타 있음요
0
77
2
No 1. 교제(ppt) soruce 복붙 문제 의 건
0
94
4
No 1. 교제(ppt) soruce 복붙 문제 의 건
0
70
3
17강 문의드립니다.
0
44
1
카카오 연동설정이 이제 안되는거 같아요
0
187
2
8장 마지막 강의 시 오류
0
98
4
혹시 뭐가 문제인지 알 수 있나요?
0
87
2
챕터: React-Router 설정
0
58
2
백)TODO관련
0
56
2
마리아 db 설치중 포트를 이미 사용중이라고 합니다
0
109
2
이강의 듣고 소화시켰다면 몇년차 정도 개발자라고 할수 있을까요?
0
105
1
CSR , SSR 의 수요 궁금증 질문
0
82
2
섹션5부터...
0
72
1
간단한 코드 질문!!
0
61
2
tbl_todo 질문입니다
0
65
2
수업 외 질문인데 'tbl'이 무슨 의미인가요???
0
289
2
엔티티클래스에서 질문입니다
0
78
2
수정시 writer값이 삭제되는 오류
0
42
2
교안 31 오타 수정해주세요
0
63
2
쿠키에 accessToken, refreshToken을 담고, 조회 시에 undefined
0
79
1