[TIL #47] 개인과제 트러블슈팅 2

디테일 페이지를 만드는 곳에서 나온 트러블 슈팅

---

params

const PokemonDetail = async ({id: string})

를 했더니 id에서 에러 나길래

export default function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/detail/:id" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
}

이제 위와 같은 별도의 라우터 컴포넌트와 useParams 훅 사용 필요없이 상세 컴포넌트의 props 로 params 접근이 가능

app/detail/[id]/page.tsx
const DetailPage = ({
  params,
}: {
  params: {
    id: string;
  };
}) => {
  return <div>Detail 페이지 : {params.id}</div>;
};

export default DetailPage;

그래서 params로 바꿨다.

const PokemonDetail = async ({ params }: { params: { id: string } }) => {

처음에는 useState , useEffect 로 했는데, 이건 use-client를 안써서 당연히 작동 안한다.

custom hook은 무조건 use-client를 사용해야하는데, 이건 use-client를 안쓰니까 useState, useEffect를 쓰면 안된다.

---

경로 설정

 const response = await fetch(`api/pokemons/${id}`); //상대 경로 사용

처음에 상대경로 사용했는데 fetch가 안되어서 절대경로로 바꾸었더니 해결

  const response = await fetch(`http://localhost:3000/api/pokemons/${id}`); //절대 경로 사용