하위 페이지 나누기
course목록 페이지와 course페이지를 하위 Route로 만들기
우선 course라는 경로를 갖는 라우터들만 따로 Route컴포넌트로 감싸준다.
그리고 여기에 path prop으로 courses를 지정한 다음에
안에 있는 Route에서는 courses/를 지워준다.
이때 index에 해당하는 Route에는 path prop대신에 index라는 prop을 지정해주면된다.
감싼 Route의 path값이 courses이니까
index Route의 path는 courses가 되고
react-frontend-develoment의 path는
courses/react-frontend-develoment가 될 것이다.
이런 식으로 만들면 좋은 점은 Route가 많아졌을 떄
경로나 용도에 따라 분리할 수 있고 path도 훨씬 간단해진다.
특히 Route안쪽을 보면 부모의 path와 전혀 상관없는 코드이다.
그래서 courses대신에 다른 경로를 사용하고 싶으면
부모 Route에 path만 바꿔주면 된다.
Route를 중첩해서 만들 때 간혹 특정 path안에서는 공통된 디자인을
보여주고 싶을 수 있다.
최상위 경로를 Route로 감싸고 path prop으로는 "/"를 내려주고
홈페이지를 랜더링하던 Route에는 index prop을 지정해준다.App 컴포넌트가 전체를 감싸고 있는데
App 컴포넌트는 공통 레이아웃을 랜더링하는 컴포넌트이다.children prop을 받아서 안에다가 랜더링하고 있다.
이 App컴포넌트를 path가 /인 Route안쪽에다가 감싸면 오류가 난다.
Routes안에는 반드시 Route나 Fragment만 배치할 수 있다.
이럴 때 리액트 라우터에서는 Outlet이라는 컴포넌트를 활용해야한다.
감쌌던 App 컴포넌트는 지워주고
element prop으로 내려준 다음
App 컴포넌트에서는 children prop대신에
Outlet컴포넌트를 넣어준다.
이렇게 하면 Route안에서 랜더링되는 부분은
Outlet컴포넌트가 있는 부분에 랜더링된다.
확인해보면 공통레이아웃이 잘 보인다.
