감정 일기장 - 페이지 추가적인 기능 구현

기존에 구현했던 페이지 기능에서,

추가적으로 url에서 params나 query를 가져오는 기능을 구현하였다.

 

 

기존 기능에서는 정해진 url로만 이동하였다.

예를 들어 /diary 는 인식하였지만 , /diary/123  는 인식하지 못하였다.

 

diary는 고유의 id를 부여할 예정이므로 Route를 아래와 같이 수정을 해주었다.

<Route path="/diary/:id" element={<Diary />}></Route>

 

코드를 변경함으로써, parameter를 붙여서 다이어리 id를 지정해서 이동할 수 있게 되었지만,

페이지 내부에서는 그 id를 알 수가 없다. 따라서 useParams를 사용하여서 id를 인식할 수 있게 해주었다.

 

id가 10인 것을 console로 통해서 다시 확인해주고 있다.

 

이후 query의 경우도 useSearchParams를 이용하여 query내부의 값들을 가져올 수 있게 만들어주었다.

useNavigate를 활용하여 바로 홈 페이지로 이동하거나, 뒤로 가는 기능도 구현해보았다.