[React] React-Router의 Hooks - useLocation 사용법과 활용 사례

 

 

---

useLocation

 

정의

• useLocation는 현재 location객체를 반환합니다. 현재 위치가 변경될 때마다 어떤 부작용을 수행하고 싶을 때 유용할 수 있습니다.

 

기본 코드 예제

import * as React from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  let location = useLocation();

  React.useEffect(() => {
    // Google Analytics
    ga('send', 'pageview');
  }, [location]);

  return (
    // ...
  );
}

 

 

 

728x90

 

 

TypeScript 코드 예제

declare function useLocation(): Location;

interface Location<State = any> extends Path {
  state: State;
  key: string;
}

interface Path {
  pathname: string;
  search: string;
  hash: string;
}

 

 

Properties

location.hash

현재 URL의 해시.

 

location.key

이 위치의 고유 키입니다.

 

location.pathname

현재 URL의 경로.

 

location.search

현재 URL의 쿼리 문자열.

 

location.state

<Link state>또는 에 의해 생성된 위치의 상태 값입니다 navigate.

 

---

 

 

출처

https://reactrouter.com/en/6.26.1/hooks/use-location#properties