react-router-dom의 Hook : useParams, useLocation, useHistory, useRouteMatch

 

https://reacttraining.com/react-router/web/api/Hooks

React Router: Declarative Routing for React

 

react-router-dom은 4개의 hook api를 제공한다. 읽어보고 사용하면 된다.

 

- useParams

 

url과 관련된 값들을 객체로 받을 수 있다.

 

당연히 HashRouter나 BrowerRotuer로 감싼 Router의 영향 아래에 있는 컴포넌트에서만 가능하다.

 

http://localhost:3000/1590559269318

라는 경로에서 useParams의 값을 출력하면 다음과 같이 출력된다.

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

export default (props) => {
  const a = useParams();
  console.log(a); // {id: "1590559269318"}
  return (
    <>
      <div>Detail</div>
    </>
  );
};

 

그 외에 react-router-dom이 제공하는 hook이 4 종류가 있다. 그 동안 사용하던 props와 크게 다르지 않으므로 알아보고 사용하면 된다.

  const params = useParams();
  const location = useLocation();
  const history = useHistory();
  const match = useRouteMatch();