React - routing, navigate

라우팅의 기본 구조

• BrowserRouter: 라우팅 기능을 앱 전체에 적용하기 위한 최상위 컴포넌트
• Routes: 여러 경로(Route)를 감싸주는 컨테이너
• Route: 실제로 경로와 컴포넌트를 매핑하는 컴포넌트

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

 

• / 주소에 들어오면 Home 컴포넌트가 렌더링되고,
• /about 주소엔 About 컴포넌트가 렌더링된다.

Link 컴포넌트 페이지로 이동

React 에서는 페이지를 새로고침하지 않고 이동할 수 있는 Link component를 제공한다. a 태그를 사용하면 전체 페이지가 리렌더링 되기 때문에 성능상 좋지 않다.

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

function Menu() {
  return (
    <nav>
      <Link to="/">홈</Link>
      <Link to="/about">소개</Link>
    </nav>
  );
}

 

to 속성에 이동하고 싶은 URL로 경로를 넣어주면 끝

 

useNavigate: 이벤트 안에서 라우팅 하기

때로는 사용자가 버튼을 클릭했을 때 페이지를 이동하고 싶을 수 있다. 예를 들어 로그인 성공 시 홈으로 이동하는 경우. 이럴 땐 useNavigate() 훅을 사용한다.

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

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 로그인 로직 수행 후
    navigate('/'); // 홈으로 이동
  };

  return <button onClick={handleLogin}>로그인</button>;
}

 

기본 사용법

const navigate = useNavigate();
navigate('/경로');

이전 페이지로 돌아가기

navigate(-1); // 브라우저 history에서 한 페이지 뒤로

상태(state)와 함께 이동

navigate('/profile', { state: { userId: 42 } });