개요

React로 프로젝트를 진행하다 보면 페이지 간 이동은 불가피하다.
이 때 페이지 간 이동을 도와주는 기능이 react-route-dom 안에 있다.

이 중 가장 자주 사용하는 것은 기록하자면,

useNavigate

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

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

handleClick을 통해 기존에 지정한 navigate를 발동시켜 "/home"으로 이동시키는 로직인데, useNavigate를 이용한 이동에는 history가 남는다.

이동에서 남겨진 기록을 통해 당장의 이전 페이지로도 이동할 수 있다.

import { useNavigate } from "react-router-dom";
let navigate = useNavigate();

// 이전 history로 이동
function goToBack() {
	navigate(-1);
}

// 현재 페이지로 이동 => 새로고침
function refresh() {
	navigate(0);
}
...

그런데,

위 기능들은 history가 필요한 기능들이다. 따라서 route의 루트들이 history를 기록하도록 만들어 놓아야 한다.

• { replace : boolean값 } : history에 이력을 남길지 여부를 설정할 수 있다.

true : history 안남김 (뒤로 가기 불가능)
false : history 남김 (뒤로 가기 가능, default 값)
( 보통 replace를 적지 않음으로써 false로 두고 쓰기 때문에 histroy 사용 가능 )

• {state: {전달할 데이터} } : 현재 페이지에서 이동할 페이지로 전달하고 싶은 데이터를 객체로 전달할 수 있다.

전달한 데이터는 useLocation 의 state 프로퍼티로 받을 수 있다.

const toWritePage = () => {
    navigate(`/GroupDetailClass/${id}/MakeAssignment`, {
      state: { info, from: "post" },
    });
  };
  
  const toAllPage = (school, grade, classNum, subject) => {
    navigate(`/NoticeDetailList/${id}`, {
      state: { school, grade, classNum, subject },
    });
  };

이동한 페이지에서 이전 페이지의 state를 받기 위해

const location = useLocation();
const information = location.state;

와 같은 방식으로 information 변수에 값을 넣을 수 있다.
toWritePage( )에서 state에 {info, from}정보가 있기 때문에

information.info
information.from
으로 뽑아서 쓰면 된다.

Navigate

특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용한다.

Route에 지정한 경로 외의 경로로 접속했을 때 보여줄 컴포넌트를 지정할 때에는 path=* 로 지정해주면 된다.

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

export const routes = [
  { path: "/", element: <Navigate to="/introduce" replace={true} /> },
  { 
    },
   ...

위 코드는 "/"경로로 접근하게 되면 "/introduce"경로로 리다이렉트 시키는 코드이다.

또한, 특정 상황에서 원하는 페이지로 보내기 위해서 조건부로 이동시킬 수 있다.

if (!isLoggedIn) {
    return <Navigate to="/login" />;
  }