리액트 라우터

URL 파라미터

useParams Hook을 사용한다.

현재 URL의 동적 파라미터를 KEY/VALUE 쌍으로 리턴한다.

사용법

const params = useParams();

쿼리스트링

URL 파라미터와 달리 Route 컴포넌트를 사용할 때 별도로 설정해야 하는 것이 없다.

src/pages/About.js

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

const About = () => {
  const location = useLocation();
  console.log(location);

  return (
    <div>
      <h1>소개</h1>
      <p>pathname:{location.search}</p>
      <p>쿼리스트링:{location.search}</p>
      <p>hash:{location.hash}</p>
      <p>state:{location.state}</p>
      <p>key:{location.key}</p>
    </div>
  );
};

export default About;

useLocation Hook 사용법

const location = useLocation();

pathname:현재 주소의 경로(쿼리스티링 제외)
search:맨 앞의 ? 문자를 포함한 쿼리스트링 값
hash:주소의 # 문자열 뒤의 값
state:페이지로 이동할 때 임의로 넣을 수 있는 상태 값
key:location 객체의 고유값,초기에는 default 상태이며 페이지가 변경될 때마다 고유의 값이 생성됨

쿼리스트링 값 파싱하기

리액트 v6부터 useSearchParams Hook

-> 현재 위치에 대한 URL의 쿼리 문자열을 읽고 수정 하는데 사용한다.

http://localhost:3000/about?detail=true&mode=1

현재 쿼리스트링 값은 ?detail=true&mode=1

사용법

const [searchParams,setSearchParams] = useSearchParams();
const detail = searchParams.get('detail')
const mode = searchParams.get('mode')

searchParams -> 쿼리파라미터를 조회하거나 수정하는 메서드들이 담긴 객체를 반환
(get,set 메서드)

setSearchParams -> 쿼리파라미터를 객체 형태로 업데이트 할 수 있는 함수를 반환한다.

주의할점
-> 쿼리파라미터를 조회할 때 값은 무조건 문자열 타입이여야 한다!

useNavigate()

-> Link 컴포넌트 사용하지 않고 다른페이지로 이동할때

const navigate = useNavigate();

NavLink

컴포넌트 링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 또는 CSS 클래스를 적용하는 컴포넌트

style 과 className은 {isActive:boolean}을 파라미터로 전달받는 함수타입의 값을 전달한다.

<NavLink 
	style={({isActive})=> isActive? 'active' : undefined}
    />