useLocation

  import { useLocation } from "react-router-dom";
  const location = useLocation();
  console.log(location);

• hash : 주소의 # 문자열 뒤의 값 (주로 History API가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용)

• key : location 객체의 고유 값, 초기에는 default 이고, 페이지가 변경될 때마다 고유의 값이 생성됨.

• pathname : 현재 주소의 경로 (쿼리스트링 제외)

• search : 맨 앞의 ? 문자를 포함한 쿼리스트링 값 //http://경로?id=10&count=2022 인경우 'id=10&count=2022'

  • URLSearchParams 사용하면 URLSearchParams객체.get("키") 로 쿼리 취득가능

    import React from 'react';
    import { useLocation } from 'react-router-dom';
    
    // http://localhost:3000/query?id=10&count=2022 로 접속 상황
    function Query() {
    // useLocation() 호출
    const location = useLocation();
    console.log(location);
    // {pathname: '/query', search: '?id=10&count=2022', hash: '', state: null, key: 'default'}
    
    // search 부분을 URLSearchParams 객체로 생성
    const searchParams = new URLSearchParams(location.search);
    // const searchParams = new URLSearchParams(useLocation().search); // 이것도 가능
    
    // 쿼리 취득
    const id = searchParams.get('id'); // id 취득
    const count = searchParams.get('count'); // count 취득
    console.log('id: ', id); // id: 10
    console.log('count: ', count); // count: 2022
    
    return <div>Query</div>;
    }
    
    export default Query;

• state : 페이지로 이동할 때 임의로 넣을 수 있는 상태 값
  navigate할때 넘어온 state 객체 조회 가능하다.

    import { useNavigate } from 'react-router-dom';
  
    export default function Test() {
      const navigate = useNavigate();
  
      // 버튼 클릭시 호출
      const move = () => {
        // 두번재 인자의 state 속성에 원하는 파라미터를 넣어준다. (id, job을 넣어봤다)
        navigate('/test2', {
          state: {
            id: 1,
            job: '개발자'
          }
        });
      };
      return (
        <div>
          <button onClick={move}>이동</button>
        </div>
      );
    }

    import { useLocation } from 'react-router-dom';
  
    export default function Test2() {
    const {state } = useLocation();
    const id = state.id;
    const job = state.job;
    return (
      <div>
        <p>id: {id}</p>
        <p>job: {job}</p>
      </div>
    );
  

예제 참고한 사이트
https://curryyou.tistory.com/477