createBrowserRouter()는 라우터를 객체로 관리한다. 다음과 같이 관리할 라우터 객체의 타입을 선언해주었다.
장바구니 프로젝트에는 Navbar가 모든 페이지에 포함되기 때문에 Navbar 컴포넌트가 포함된 페이지를 메인 레이아웃으로 두기로 한다. 메인 레이아웃 컴포넌트를 라우터 객체에서 관리할 수도 있겠지만, 그렇게 되면 다른 페이지들이 메인 레이아웃 컴포넌트의 children 프로퍼티에 들어가야 해서 재사용하기 어려울 것 같았다.
그래서 createBrowerRouter() 를 사용해 가공된 라우터 객체 배열을 전달하기로 했다.
현재는 모든 페이지에 Navbar가 들어가지만, 이후 Navbar가 없는 페이지가 생길 경우의 확장성을 고려해 main 프로퍼티를 optional하게 지정하여 작동이 되는지 확인하기 위해 아래와 같이 라우터 객체를 추가하였다.
createBrowswerRouter() 를 사용해 router 배열을 가공한다.
다음과 같이 네브바가 필요하지 않은 영역에서는 '메인 레이아웃입니다.' 가 출력되지 않음을 확인할 수 있다.
