useParams()

react-router-dom (v5.3.0 기준) useParams hook은 동적으로 움직이는 주소창에 있는 내용중 일부를 반환해준다.

 

반환하는 내용은 <Route path="/:<params>"> ... </Route> 에 있는 params를 반환해준다.

 

예로 들어 아래의 코드가 있다고 가정해보자.

// Router.tsx

<BrowserRouter>
  <Switch>
    <Route path="/:coinId">
      <Coin />

// Coins.tsx

<Link to={ {pathname: `/${coin.id}`} }>

// Coin.tsx

const { coinId } = useParams<RouteParams>();

Router.tsx에서 Route path의 형식을 /:coinId 라고 지정해줬다.

따라서 Coin.tsx에서 useParams를 이용해 받는 객체에서 키 이름은 coinId가 된다.

 

또한, Coins.tsx에서 Link to를 통해 코인 아이디 값을 넘겨준다.

만약 넘겨주는 값이 eth-ethereum 이라면, Coin.tsx에서 받는 coinId의 값은 eth-ethereum이 된다.

 

 

정리하자면, react-router-dom을 이용해서 Routes를 구성해 페이지를 /를 기준으로 분할하는데,

Link to로 값을 보내면 그 값이 키가되어 /뒤에 붙게 된다.

useParams는 그 키 값을 이용해 /뒤에 오는 params를 추출한다.

 

 

공식 문서

React Router | useParams

 

 

요약

---

<Link to={{ pathname: `/params`, }}>  =>  <Route path="/:key">  =>  useParams()  =>  key===params