의류 쇼핑몰 9 | Routing 3 | Navigation Bar | index

지금은 한 페이지에 모든 내용이 나오고 있다.

 

 

Navigation Bar 를 이용해서 한 페이지에 해당 내용만 나오게 해보자. 

 

 

 

App.js에 Navigation component를 만들어 준다. 

 

 

Navigation을 가장 부모 태그로 만들고 path는 / 로 지정해준다. 

 

 

Navigation component에 Outlet로 자식 태그의 위치를 지정해 준다. 

일단 Outlet을 import한 후 

Outlet을  h1 아래에 위치시킨다. 

 

 

안의 path도 일단 home과 shop으로 이름을 바꿔주고, 

서로 silbling으로 만들어 준다. 

 

 

 

 localhost:3000/  로 가니 Navigation component가 나오고

 

 

 localhost:3000/home  로 가니 부모 Navigation과 home이 같이 나온다.

 

 

 localhost:3000/shop  로 가니 부모 Navigation과 shop이 같이 나옴

sibiling home은 나오지 않는다.

 

 

 

home으로 가지 않고 메인 홈 페이지에 사진이 나오도록 하기 

 

 

또는 짧게 index만 써줘도 된다. 

index를 써주면 기본 컴포넌트가 된다. 

 

 

 

 localhost:3000  로 가니 Navigation과 Home이 같이 나오는 것을 볼 수 있다.