[#. react-router-dom] react-router-dom 5.2 버전으로 업데이트하고 useHistory, useParams, useLocation, useRouteMatch hooks 사용하기

 

 

 

 

 

React >= 16.8

react-router-dom >= 5.1

react 16.8 이상, react-router-dom 5.1 이상에서 사용 가능한 Hooks들에 대해 알아보려고 한다

 

 

reactrouter.com/web/api/Hooks

React Router: Declarative Routing for React

 

 

 

 

 

 

 

 

 

 

 

업데이트 전에는 페이지 이동할 때 withRouter를 이용했다

 

import React from 'react';
import { withRouter } from 'react-router-dom';


function PurchasePage(props) {

   const moveToPurchase = () => {
      props.history.push(`/HistoryPage/${props.productId}`)
   }
   
   return (
      <div>
         ...
         <button onClick={moveToPurchase}></button>
      </div>
   )
}

export default withRouter(PurchasePage);

 

 

 

 

 

react-router-dom 5.2를 설치하고 사용해 보자

 

 

 

① react-router-dom 5.2 설치

 

npm install react-router-dom --save

 

 

 

 

 

② hooks

 

hooks에는 useHistory, useParams, useLocation, useRouteMatch가 있다

 

 

⑴ useHistory

useHistory는 기존에 history.push('/')로 많이 사용하던 history와 같은 기능을 한다

페이지 이동에 사용할 수 있는 history 인스턴스에 접근한다

 

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

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

 

 

 

⑵ useParams

URL 매개 변수의 key/value 쌍의 객체를 반환한다

기존에 props.match.params.key로 가져오던 파라미터 값에 접근한다

 

import React from 'react';
import { useHistory, useParams } from 'react-router-dom';


function PurchasePage(props) {

   const params = useParams()

   const moveToPurchase = () => {
      history.push(`/PurchaseProduct/${params.productId}`)   // params.key값
   }
   
   return (
      <div>
         ...
         <button onClick={moveToPurchase}></button>
      </div>
   )
}

export default PurchasePage;

 

 

 

⑶ useLocation

 

현재 URL을 가져온다

URL이 변경될 때마다 새 위치를 반환하는 useState처럼 생각할 수 있다

 

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';


function PurchasePage(props) {

   const location = useLocation()

   useEffect(() => {
      console.log(location)
   }, [])

   return (
      <div>
         ...
      </div>
   )
}

export default PurchasePage;

 

 

현재 URL은 localhost:3000/product/6020ac6cc3c63다 

콘솔창에 로그를 찍어보면 location은 이렇게 Object를 가져온다

pathname을 보면 / 뒤에 URL을 가져오는 것을 알 수 있다

 

 

 

get 방식으로 query string에 key값을 보내보자

localhost:3000/product/600a3b321b47cd357e7d7359?key=1

그럼 이렇게 pathname, search로 각각 가져오는 것을 볼 수 있다

 

 

 

 

 

⑷ useRouteMatch

 

현재 URL과 일치하는지 여부를 true, false로 반환한다

 

import React, { useEffect } from 'react';
import { useRouteMatch } from 'react-router-dom';


function PurchasePage(props) {

   const match = useRouteMatch('/')

   useEffect(() => {
      console.log(match)
   }, [])

   return (
      <div>
         ...
      </div>
   )
}

export default PurchasePage;

 

 

URL 일치할 시 true 반환

 

 

 

URL 불일치할 시 false 반환