[React] 라우터(Router) 사용 방법, 리액트 페이지 이동, Link useNavigate 사용방법

문제발생

리액트에서는 페이지 이동을 원할 때 a태그를 사용을 권장하지 않는다.

이유 - 1. 페이지 새로고침 방지, 2. 내부라우팅, 3. 브라우저 히스토리 관리

 

위와 같은 이유로 리액트에서는 라우터(Router)라는 라이브러리를 사용하여 페이지 이동을 권장한다.

그렇다면 라우터는 어떻게 사용할까?

 

문제해결

1. 라우터 다운로드

npm install react-router-dom

 

2. index.js 수정 (라우터 적용)

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom"; // 라우터 라이브러리 임포트
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    {/* App 컴포넌트를 BrowserRouter 태그로 감싼다. */}
    <BrowserRouter> 
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

reportWebVitals();

 

3. App.js 수정 (라우트 생성)

//App.js
import React from "react";
import { Route, Routes } from 'react-router-dom'; // 라우터 라이브러리 임포트
import Main from "./components/Main"; // 이동할 컴포넌트 임포트
import Profile from "./components/Profile"; // 이동할 컴포넌트 2

function App() {
  return (
    <>
      <Routes>
      {/* 이동할 컴포넌트들 */}
        <Route path="/" element={<Main />} /> 
        <Route path="/Profile" element={<Profile />} 
      </Routes >
    </>
  );
}

export default App;

 

//////////참고!

///// Route 사용 방법
<Route path="주소규칙" element={보여 줄 컴포넌트} />


////// Route 사용 예시
<Route path="/Profile" element={<Profile />} 

// 위 예시에서 주소규칙이 /Profile 이므로 <Link to="/Profile"> 을 통해 Profile.jsx 컴포넌트로 이동할 수 있다.

 

 

4. 페이지 이동

4.1 Link로 페이지 이동

import React from 'react';
import { Link } from 'react-router-dom'; 

const OnSignIn = () => {
    return (
        <div>
            <Link to="/Profile">프로필로 이동</Link>
        </div>
    );
};

export default OnSignIn;on

//////////참고!

///// Link 사용 방법
<Link to="경로">링크 이름</Link>

///// Link 사용 예시
<Link to="/Profile">프로필로 이동</Link>

// '프로필로 이동' 텍스트를 클릭하면 "/Profile" 주소 규칙으로 설정된 컴포넌트로 페이지를 이동한다.

 

4.2 useNavigate로 페이지 이동

import React from "react";
import { useNavigate } from "react-router-dom";

const OnSignIn = () => {
  const navigate = useNavigate(); // useNavigate 훅을 담은 navigate 변수 선언

  const signIn = () => {
  	// 유저 인증이 성공하면 프로필 페이지로 이동
    if(userAuth === true)
    {
    	navigate("/Profile"); // navigate 사용
    }
    else
    {
    	console.log("인증 오류");
    }
  };

  return (
    <div>
      {/* 버튼 클릭 시 인증 후 프로필 페이지로 이동 */}
      <button onClick={signIn}>로그인</button>
    </div>
  );
};

export default OnSignIn;

필자는 단순히 <a> 대체 용도라면 <Link>를 권장하지만

인증 등 별도의 처리 후 페이지 이동을 원한다면 useNavigate를 권장한다.

 

참고자료

< 리액트에서 <a>를 사용하지 않는 이유 >

https://velog.io/@yeonsubaek/React-Link-vs-a-tag-ft.-react-router-dom#:~:text=a%20%ED%83%9C%EA%B7%B8%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EB%A9%B4,%ED%95%B4%EB%8F%84%20%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8%EB%90%98%EC%A7%80%20%EC%95%8A%EB%8A%94%EB%8B%A4.

[React] Link vs <a> tag (ft. react-router-dom)

 

< 라우터 기본 사용법 >

https://velog.io/@brgndy/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9A%B0%ED%84%B0-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95

리액트 라우터 기본 사용법

 

< Link 와 useNavigate 차이점 >

https://velog.io/@seokkitdo/React-Link-useNavigate

[React] Link & useNavigate