[React] Router v6 리다이렉트 및 경로 이동 처리(새로고침X): 404에러 페이지 렌더링 활용

# React-Router-Dom V6 리다이렉션 및 경로이동 처리 방법

일반 자바스크립트에서는 window.location 을 이용해 특정 경로로 이동시킬 수 있다.

리액트에서도 물론 이용 가능하지만, 페이지가 새로고침되는 이슈가 있다.

 

이 글은 리액트 라우터 v6 에서 새로고침 없이 경로 이동 및 리다이렉션 처리 방법을 정리한다.

 

방법은 2가지 인데,

1. 컴포넌트 내부에서 useNavigate hook을 사용는 방법과

2. useNavigate을 사용할 수 없을 때, Navigation 컴포넌트를 사용하는 방법이다.

 

이를 이용해 없는 주소로 접근시, 404에러 페이지 리다이렉션 처리도 가능하다.

---

1. useNavigate 훅

useNavigate() 를 호출하면, 경로 이동 처리를 할 수 있는 "함수"를 반환한다.

이 함수를 이용해 뒤로 이동, 경로 이동 등을 처리하면 된다.

replace 옵션을 통해 history에 이력을 남길지 여부를 설정할 수 있다.

 

사용방법은 아래 코드를 보면 너무나 명확하다.

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

export default function Test() {
  const navigate = useNavigate();
  return (
    <div>
      <button onClick={()=>{navigate(-1)}}>history 뒤로 이동</button>
      <button onClick={()=>{navigate("/admin")}}>절대 경로 이동</button>
      <button onClick={()=>{navigate("../content")}}>상대 경로 이동</button>
      <button onClick={()=>{navigate("/admin", { replace: true })}}>history 이력 안남김</button>
    </div>
  );
}

* 더 이상의 자세한 설명은 생략한다. 왜냐하면 없기 때문이다.

* 혹시 페이지 이동시, 파라미터를 전달하고 싶다면, 아래 글을 참고하자.

[React] Router v6: useNavigate() 파라미터 전달&취득 방법 - useLocation()

 

 

2. <Navigate to="/이동시킬경로"></Navigate>

useNavigate 훅의 래퍼 컴포넌트이다.(인자도 동일하다)

useNavigate 를 사용할 수 없는 환경에서 경로 이동 처리에 사용한다.

 

예제 코드는 아래와 같다.

이 컴포넌트는 렌더링 되는 즉시, "/" 경로로 이동된다.

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

export default function Redirect() {
  return <Navigate to="/"></Navigate>;
}

 

 

로그인 여부를 체크하여 리다이렉트 시키는데 활용할 수 있다.

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

export default function Test({user}){
	return (
	<div>
	  {user && (<Navigate to="/admin" replace={true} />)}
	</div>)
}

 

! 개인적으로 가장 유용하게 사용하는 기능!

<Route>의 path에 바로 지정할 수도 있다.

이를 이용해 404 에러 페이지 리다이렉션을 처리하기도 한다.

import React from 'react';
import { Route, Routes } from 'react-router-dom';


function App() {
  return (
    <div className="App">
        <Routes>
          {/* 404 리다이렉트 처리 */}
          <Route path="/*" element={<Navigate to="/"></Navigate>}></Route>
        </Routes>
    </div>
  );
}

export default App;

---

※ 참고 레퍼런스

https://reactrouter.com/docs/en/v6/hooks/use-navigate

https://reactrouter.com/docs/en/v6/components/navigate