페이지라우팅

React Router 

• SPA에서 라우팅을 처리하기 위한 표준 라이브러리
• 사용자가 URL을 변경하거나 페이지를 탐색할때 전체 페이지를 새로 로드하지 않아도 콘텐츠를 변경 할 수 있게 도와줌
  • SPA - 전체 페이지 새로고침 없이도 페이지 전환 (컴포넌트 렌더)
  • 유연한 라우팅 - 동적 라우팅, 중첩 라우팅, 라우팅 전환시 상태 관리 가능
  • 리디렉션 설정 가능
  • SEO 개선 가능 - 서버사이드 렌더링과 함께 사용시 SEO에 유리

 

사전설치 : npm install react-router-dom

 

전체 흐름

1. react-router-dom 설치
2. BrowserRouter로 페이지 라우팅 할 부분 감싸기
3. Routes와 Route를 사용해 라우트 정의
4. Link / NavLink를 사용한 페이지 전환 혹은
5. 동적 라우팅과 useNavigate 활용

 

주요 컴포넌트

• BrowserRouter
  • 감싼 부분을 라우팅 가능하게 해줌
  • URL을 기반으로 컴포넌트를 랜더링

// 예시
import {BrowserRouter} from 'react-router-dom'

createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

 

• Routes와 Route
  • Routes - 라우터 집합을 정의
  • Route - 각 URL에 대해 렌더링할 컴포넌트를 정의
    • / 로 URL 접근하면 Home 컴포넌트 렌더링
    • /list 로 접근하면 PageList 컴포넌트 렌더링
    • 중첩 라우트 가능

// 예시
import { Route, Routes } from 'react-router-dom'

function App() {
  return (
      <Routes>
        <Route path='/' element={<Home/>}/>
        <Route path='/add' element={<Register/>}/>
        <Route path='/view' element={<View/>}/>
        <Route path='/list' element={<PageList/>}/>
        <Route path='*' element={<NotFound/>}/>
      </Routes>
  )
}

// 중첩 라우트
function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* 하위 라우트를 렌더링할 위치 */}
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="settings" element={<Settings />} />
          <Route path="profile" element={<Profile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}


// /dashboard: Dashboard 컴포넌트만 렌더링.
// /dashboard/settings: Dashboard와 함께 Settings 렌더링.
// /dashboard/profile: Dashboard와 함께 Profile 렌더링.

 

 

• Link / NavLink
  • Link : 특정 경로로 이동할 수 있는 링크 제공
  • NavLink : 링크와 비슷하게 동작하지만, 현재 활성화된 경로를 기반으로 특정 스타일이나 클래스에 적용 가능
    • 사용자가 어떤 경로에 있는지 시각적으로 표시 할 수 있어, 탭 네비게이션이나 메뉴를 구현할 떄 유용
    • 특징
      • 경로에 따라 자동 활성화 - 현재 URL 경로와 to 속성이 일치하면 해당 링크를 활성화 상태로 설정
      • activeClassName / activeStyle 지원 - 활성화된 링크에 추가적인 클래스나 스타일 적용 가능
      • 중첩된 라우팅 지원 - 부모 경로에 있는 NavLink도 활성화 상태로 유지 가능
  • Link 사용 예시

import { Route, Routes, Link } from 'react-router-dom'
import './App.css'
import Home from './components/Home'
import View from './components/View'
import Register from './components/Register'
import PageList from './components/PageList'
import NotFound from './components/NotFound'

function App() {

  return (
    <>
      <span> <Link to= {'/'}>Home</Link></span>
      <span> <Link to= {'/add'}>Register</Link></span>
      <span> <Link to= {'/view'}>View</Link></span>
      <span> <Link to= {'/list'}>PageList</Link></span>
      <Routes>
        <Route path='/' element={<Home/>}/>
        <Route path='/add' element={<Register/>}/>
        <Route path='/view' element={<View/>}/>
        <Route path='/list' element={<PageList/>}/>
        <Route path='*' element={<NotFound/>}/>
      </Routes>
    </>
  )
}

• NavLink 사용 예시

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

function Navbar() {
  return (
    <nav>
      <NavLink
        to="/"
        end
        className={({ isActive }) => (isActive ? 'active' : 'inactive')}
      >
        Home
      </NavLink>
      <NavLink
        to="/about"
        className={({ isActive }) => (isActive ? 'active' : 'inactive')}
      >
        About
      </NavLink>
      <NavLink
        to="/contact"
        className={({ isActive }) => (isActive ? 'active' : 'inactive')}
      >
        Contact
      </NavLink>
    </nav>
  );
}

export default Navbar;

 

.css

.active {
  font-weight: bold;
  color: green;
}

.inactive {
  color: gray;
}

 

• useNavigate
  •  프로그램적으로 다른 페이지로 이동할 때 사용
    • replace : true == 현재 히스토리 날림

    import { useNavigate } from 'react-router-dom';
    
    const navi = useNavigate();
	const closeModal = () => {
        	setResult(null)
        	console.log('로그인 화면 이동')
        	navi('/login',{replace:true})
            }

 

• useParams
  • 동적 라우팅에서 URL 매개변수를 가져옴

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

const View = ()=>{
    const {no} = useParams();

    console.log(no)
    return (
        <>
        <h1> {no} 번째 회원정보~ </h1>
        </>
    )
}

 

• UseLocation
  • 현재 경로의 정보를 가져옴

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

function CurrentPath() {
  const location = useLocation();

  return <p>Current Path: {location.pathname}</p>;
}

 

• 동적 라우팅
  • 특정 ID나 파라미터에 따라 다른 콘텐츠를 렌더링할 수 있다

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

function UserProfile() {
  const { userId } = useParams(); // URL 파라미터 가져오기
  return <h1>User Profile: {userId}</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:userId" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

// URL 예시 : /user/123
// 출력 : User Profile: 123

 

 

• 리다이렉션
  • 특정 경로로 강제 이동 가능

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navigate to="/home" />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}