미니 프로젝트를 진행하는 가운데 React Router를 통해 페이지 이동을 하는 문제를 만나게 되었다. 첫 페이지에서 Router을 통해 페이지 이동을 하는 것은 작성할 수 있다. 하지만 페이지 안의 페이지 이동을 하는 코드를 작성해야했다.
즉, 중첩된 Router을 사용해야 한다. Router와 4시간을 싸운 결과는 허무하게 해결되었다.... 이유는 나의 실수...

Router

<Routes>
  <Route path="/" element={<Index />}/>
  <Route path="/one" element={<One/>}/>
  <Route path="/two" element={<Two />}/>
</Routes>

Router은 만약 내가 localhost:3000번에 접속한 경우 다음과 같은 URL 주소로 접속할 수 있다.

localhost:3000/
localhost:3000/one
localhost:3000/two

내가 만난 문제...

메인 페이지에서 다음 페이지로 이동하는 것은 할 수 있지만 이동한 페이지에서 또 다른 이동을 하는 문제는 어떻게 해결을 할지 고민이 되었다. 그러다 알게 된 것이 중첩된 Router을 사용하는 것이다. Route의 path는 URL 경로를 나타내는 것인데 만약 /one/*를 사용할 경우 one/ 뒤에 *은 어떤 경로가 와도 이동할 수 있다는 것이다. 그래서 처음 작성한 코드는 다음과 같다.

<Route path='/item-list/*' element={<ItemList />}>
	<Route path='detail/' element={<ItemDetail />}></Route>
</Route>

*의 뒤에 어떤 링크가 와도 가능하다고 했는데 내가 보는 페이지는 계속 같은 페이지였다. 그 뒤로 여러 코드를 작성했지만 빈 페이지가 보이거나 오류를 발생하는 문제를 만났다. 그래서 내가 내린 결론은 중첩된 Router의 경우에는 페이지를 누적해서 보여준다라는 결론을 내렸다. 하지만 이건 나의 실수로 만들어진 결과였다...😥

올바른 중첩된 Router - Outlet

<Route path='/item-list/*' element={<Outlet />}>
	<Route path='' element={<ItemList />}></Route>
	<Route path='detail/' element={<ItemDetail />}></Route>
</Route>

내가 저지른 실수는 바로 element={<Outlet />}이다. 중첩된 Router을 사용하기 위해서는 Outlet으로 부모 라우트로 설정하고 자식 라우트를 설정하면 된다. 위에 잘못된 결론을 내리게 된 이유는 부모로 ItemList를 설정해두었기 때문에 페이지를 이동해도 누적되어 보일 수 밖에 없었다.

http://localhost:3000/
http://localhost:3000/item-list/
http://localhost:3000/item-list/detail

수정한 결과 http://localhost:3000/에서 내가 원하는 URL 주소로 페이지 이동을 할 수 있게 되었다..!!!

---

작업을 하면서 느낀점

배운 내용이지만 사용하지 않으면 다시 봐도 어떤 내용인지 이해하기 어렵고 4시간을 그냥 보낼 수 있다는 것을 느꼈다....
반복해서 코드를 작성하며 연습하는 것만이 답이다..!😅