행복을 담는 블로그

[TIL] 240208(목) /:params 문법은 Router에서만...!!! 본문

TIL

[TIL] 240208(목) /:params 문법은 Router에서만...!!!

hyun0zin 2024. 2. 9. 01:10

또다시 오늘의 멍청한 실수 ...

const CardClickHandler = () => {
    if (todo.id === id) {
      navigate(`/detail/:${todo.id}`);
    }
};
navigate(`/detail/:${todo.id}`);

오늘 한 멍청한 실수는 바로... navigate에서 /detail 뒤에 /id 값만 붙여줘야하는데, /:id로 :을 함께 써서 id 값을 계속 못 찾고 있었던 것...!!!

console.log 찍어보니 id 값이 숫자 또는 문자열만 나오는게 아니라 : 1 이런식으로 나오고 있었다...

/:는 Router에서만 사용하는 문법으로 뒤에 params를 붙이도록 설계되어 있다.

<Route path="/detail/:id" element={<DetailPage />} />

이 값을 url 경로로 사용하기 위해서는 /detail/id로 사용해야 했던 것...!!!

디버깅을 통해서 console.log를 계속해서 찍어가며 확인을 해야한다!

정신 차리자...!! 디버깅 화이팅...!!

 

+ 오늘 팀 프로젝트 코드 짜다가 vite의 새로운 걸 하나 알게 되어 정리해보았다. 

https://hyun0zinlog.tistory.com/74