코드

import React from 'react'
import { useLocation } from 'react-router-dom'

function About() {
  const location = useLocation();
  return (
    <div>
      <h1>소개</h1>
      <p>리액트 라우터를 사용해 보는 프로젝트입니다.</p>
      <p>쿼리스트링: {location.search}</p>
    </div>
  )
}

export default About

useLocation

현재 사용자가 보고있는 페이지의 정보를 지니고 있음

• http://localhost:3000/about?detail=true&mode=1
  • pathname: 현재 주소의 경로(쿼리스트링 제외)
    • http://localhost:3000/about
  • search: 맨 앞의 ? 문자를 포함한 쿼리스트링 값
    • ?detail=true&mode=1
  • hash: 주소의 # 문자열 뒤의 값(주로 History API가 지원되지 않는 구형 브라우저에서 클라이언트라우팅을 사용할 때 쓰는 해시 라우터를 사용)
  • state: 페이지를 이동할 때 임의로 넣을 수 있는 상태 값
  • key: location 객체의 고유값, 초기에는 default이며 페이지가 변경될 때마다 값이 생성됨

사실 useSearchParams로 어느정도 가능함~~