[React] react-router-dom 에서 URL 파라미터를 받아와보자

만약

/spot/BTCUSDT_SPBL?type=spot

이라는 URL 파라미터를 설정해주기 위해서는 아래와 같이 작성해야한다

<Route path="/spot/:id" element={<SpotTradingPage />} />

이렇게 하게 되면 위의 id값은 BTCUSDT_SPBL이 되는 것 이다.

그럼 뒤에 타입은 어떻게 가지고올까?

 

useLocation hook을 사용하여 쿼리 파라미터를 받아와 사용할 수 있다

 

예를 들어서

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

function SpotTradingPage() {
  const location = useLocation();
  const id = useParams<{ id: string }>().id;
  const type = new URLSearchParams(location.search).get("type");

  // ...

  return (
    // ...
  );
}