useNavagate

라우터 이동 쉽게 하는 훅 찾아보다가 useHistory.
단, 리액트 라우터 v6에서는 기존의 useHistory 대신 useNavigate를 사용해야한다.

공식문서 : https://reactrouter.com/en/main/hooks/use-navigate

// This is a React Router v5 app
import { useHistory } from "react-router-dom";

function App() {
  let history = useHistory();

  return (
    <div>
      <button onClick={() => {history.push("/main")}}>go home</button>
      <button onClick={() => {history.goBack()}}>prev page</button>
      <button onClick={() => {history.push(`/product/$parseInt(id)`)}}>detail page</button>
    </div>
  );
}

아래 버전으로 사용

// This is a React Router v6 app
import { useNavigate } from "react-router-dom";

function App() {
  let navigate = useNavigate();

  return (
    <div>
      <button onClick={() => {navigate("/main")}}>go home</button>
      <button onClick={() => {navigate(-1)}}>prev page</button>
      <button onClick={() => {navigate(`/product/$parseInt(id)`)}}>detail page</button>
    </div>
  );