POB_0602

팀 과제

오늘은 라우팅, breadcrumb컴포넌트 수정을 했다

breadcrumb는 마지막 항목(현재 페이지)는 클릭되지않도록 만들었고 이 과정에서 길이가 좀 늘어나 Item컴포넌트를 따로 만들어 사용했다.

라우팅은 원래 유저 관리 안에서 유저 정보로 넘어가게 되고, 유저 관리 하위 라우팅으로 유저 정보가 있었어야 했다. 하지만 지금 구조는 유저 정보와 유저 관리가 같은 레벨에서 라우팅되고 있었다. 홈 > 유저 관리, 홈 > 유저 정보 인 현재 상태를 홈 > 유저 관리 > 유저 정보 이렇게 바꾸려고 한 것이다.

이를 위해선 중첩 라우팅(nested routing)이 필요했는데 react-router-dom v6로 넘어오면서 약간 바뀌었다. Route의 중첩으로 표현하고, children으로 들어간 하위 Route는 상위 Route의 Outlet으로 들어간다.

• 기존

 <Routes>
   	<Route path='userManage' element={<UserManage />} />
    <Route path='userInfo' element={<UserInfo />} />
</Routes>

• 수정

 <Routes>
   	<Route path='userManage' element={<Outlet />}>
     	<Route path='' element={<UserManage />} />
        <Route path='userInfo' element={<UserInfo />} />
    </Route>
</Routes>

이렇게 하면 UserManage로 라우팅 되었을 때 Outlet이 출력되며, 이 Outlet 안에는 아무것도 추가 입력이 없다면 UserManage가, userInfo가 입력되어있다면 UserInfo로 간다.

v6로 오면서 기본값이 exact이기도 하고, match를 사용하던 방법 등이 많이 바뀌어 매번 새로 찾아보게 되는 것 같다. 왠만한건 react-router 공식 페이지에 다 나와있긴 하다.