[포켓몬 수집 사이트]1. 셋팅, 리액트 라우터

이번 플젝은 리액트 라우터 돔, 스타일컴포넌트를 사용한다!

그래서인가.. 시작부터 에러가 계속...

 

public에 넣어둔 이미지를 가져오려고 이렇게 적었는데👇

<img src={`${process.env.PUBLIC_URL}/images/logo.png`} alt="logo" />

에러가 떴다...👻👻👻

 

Vite와 같은 번들러에서는 process 객체가 기본적으로 정의되지 않기 때문에 발생하는 오류임ㅠㅠ

💫그래서 코드를 이렇게 수정함!

<img src={`${import.meta.env.BASE_URL}images/logo.png`} alt="logo" />

 

 

react router 설치후 경로 설정!

const router = createBrowserRouter([
  {
    path: "/",
    errorElement: <NotFound />,
    children: [
      { index: true, element: <Home /> },
      { path: "dex", element: <Dex /> },
      {
        path: "pokemon/:pokemonId",
        element: <Detail />,
      },
    ],
  },
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <RouterProvider
    router={router}
  />
);

 

그리고 카드를 클릭시 id를 Link태그로 보내는데 자꾸 href에 dex가 뜨는 문제가👻👻👻

const StyledLink = styled(Link)`
  background: #fff;
`;
...
<StyledLink to={id}>

 

이유를 모르겠어서 튜터님께 찾아갔더니 Link태그에 절대경로 /슬러쉬를 적어줘야한다고 하셨음!!!

그리고 url를 위에 경로에서 pokemon/:pokemonId를 적어줬기때문에 이를 따라야함!

💫 그래서 해결한 코드💫

<StyledLink to={`/pokemon/${id}`}>

 

path받아오기

import { useParams } from "react-router-dom";

const { pokemonId } = useParams();

구조분해할당할때 값을 path에 쓴 값과 동일하게!!!

뒤로가기 구현

useHistory가 왜 안되나 했는데 없어졌...

웹api를 사용해서 뒤로가기 구현까지 완료@@

const handleGoBack = () => {
    history.back();
};
  
<button type="button" onClick={handleGoBack}>
   뒤로가기
</button>