[React-Router]리액트 라우터 v5 → v6 (useHistory → useNavigate)

 

리액트 라우터 v6에서는 기존의 useHistory 대신 useNavigate를 사용해야합니다.

 

공식문서 : https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory

(공식문서 링크 변경)

공식문서 : https://reactrouter.com/en/6.21.2/hooks/use-navigate#usenavigate

// 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>
  );

 

 

 

외부링크로 이동하고 싶으면

window.location.replace(링크);