리액트 라우트 useNavigate, useLocation, URLSearchParams 사용

🔍 useNavigate()란?

useNavigate는 Link의 용도와 마찬가지로 페이지 이동을 하게 하는 함수이다.

하지만 Link는 클릭시 페이지를 바로 이동하게 하는 기능을 하고 useNavigate는 조건을 만족했을때 페이지 전환을 하도록 한다.

- Link의 예시 : 상품을 클릭하면 해당 상품에 대한 디테일페이지로 이동

- useNavigate의 예시 : 회원가입이 완료 되면 메인페이지로 이동

🔍 useNavigate 사용법

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

function NewQuote() {
  
  //1. useNavigate() 호출하기
    const navigate = useNavigate();
  
  // 2. navigate('이동할페이지') 작성하기
  
      const addQuoteHandler = quoteData => {

        navigate('/quotes')
    }

위로 예를 들면 addQuoteHandler 함수가 실행될때 /quotes 페이지로 이동하게 된다.

         <img
            src={props.thumbnailImg}
            alt="img"
            className={classes.thumbnailImg}
            onClick={() =>
              navigate(`watch/${props.id}`, {
                state: {
                  id: props.id,
                  title: props.title,
                  channelTitle: props.channelTitle,
                  publishedAt: props.publishedAt,
                  thumbnailImg: props.thumbnailImg,
                },
              })
            }
          ></img>

위의 코드처럼 해당 컴포넌트의 정보들을 useNavigate를 통해 이동할 주소로 보내서, 사용할 수도 있다.

이 정보들을 useLocation을 통해서 받을 수있다.

🔍 useLocation이란 ?

useLocation를 사용하면 현재 URL의 쿼리 파라미터를 받아올수 있다.

🔍 쿼리 파라미터란 ?

쿼리 파라미터란 사진의 빨간색 박스처럼 ?뒤에 지정하는 문자를 말한다. 여러개를 연결할때는 &를 사용한다. 다른 말로는 쿼리스트링이라고 한다.

🔍 useLocation 사용법

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

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

콘솔창에 출력해보면 useLocation 객체 정보가 출력된다.

pathname 은 해당 경로고, search는 쿼리스트링이다.

  const { state } = useLocation();

  console.log(state);

위에 useNavigate를 통해 보내준 정보가 들어있다.

🔍 URLSearchParams란

URLSearchParams는 자바스크립트 내에 내장되어있는 객체로서 URLSearchParams를 사용해서 쿼리스트링을 가져와서 조회 or 수정할 수 있다.
최신브라우저에서만 지원된다

🔍 URLSearchParams 사용법

// 주소가 http://localhost:3000/quotes?sort=asc 일때

  const location = useLocation();
  const queryParams = new URLSearchParams(location.search); // location의 search값  필수

console.log('queryParams : ', queryParams); // {} 아직 빈 객체


const isSortingAscending = queryParams.get('sort'); 

console.log(isSortingAscending); // asc