[react] react-router-dom V6에서 queryString 사용법

2가지 방법으로 queryString을 사용해 보았다.

import queryString from "query-string";
import { useLocation, useSearchParams } from "react-router-dom";

export default function About() {
  // useLocation()
  const { search } = useLocation();
  const values = queryString.parse(search);
  console.log(values);

  // useSearchParams()
  const [searchParams] = useSearchParams();
  const query = queryString.parse(searchParams.toString());
  console.log(query);
  return (
    <div>
      <h2>About 페이지입니다.</h2>
      {query.name && <p>name 은 {query.name} 입니다.</p>}
    </div>
  );
}

두가지 방법모두 잘 실행된다.

자세한 내용은 아래 페이지에서

https://ui.dev/react-router-v5-query-strings

Query Strings with React Router v5

https://ui.dev/react-router-query-strings

A Guide to Query Strings with React Router