[React] React-Router

 

React Router는 리액트 애플리케이션에서 페이지 내비게이션을 관리하는 라이브러리이다.

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

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

 

 

Nested Route: 중첩된 라우트는 하위 컴포넌트에서 또다른 라우트를 정의할 수 있도록 해준다.

// App 컴포넌트 안에서의 중첩된 라우트
<Routes path="/courses" element={<Courses />}>
  <Route path="course-list" element={<CourseList />} />
  <Route path="course-detail/:id" element={<CourseDetail />} />
</Routes>

 

 

Outlet: 중첩된 라우트의 컴포넌트들이 렌더링되는 위치를 나타낸다. 

// Courses 컴포넌트
function Courses() {
  return (
    <div>
      <h2>Courses</h2>
      {/* Outlet을 통해 중첩된 라우트의 컴포넌트를 렌더링 */}
      <Outlet />
    </div>
  );
}

 

 

 

Link	NavLink
페이지 전환을 처리하는데 사용	현재 활성화된 링트에 대해 스타일을 적용하는데 유용, 'active'라는 클래스가 생성되어 스타일을 적용할 수 있다.

 

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

// Link 사용 예제
<Link to="/home">홈으로 이동</Link>

// NavLink 사용 예제
<NavLink to="/about" className="active">소개</NavLink>

 

 

useParams: 동적으로 변경되는 URL 파라미터 값을 가져올 수 있다.

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

function UserProfile() {
  const { username } = useParams();
  return <div>{username}의 프로필 페이지</div>;
}

 

useNavigate: 프로그래밍 방식으로 페이지를 이동시키는데 사용된다.

replace메서드: 브라우저의 히스토리를 변경하지 않고 페이지를 이동한다.

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

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

  // '/new-page'페이지 이동
  const handleClick = () => {
    navigate('/new-page');
  };

  // 페이지 이동 (replace)
  const handleReplace = () => {
  // 뒤로가기를 할 때 replace 사용, 기존 페이지의 히스토리가 남지 않음로 오류를 방지할 수 있음
    navigate(-1, { replace: true });
  };

  return (
    <div>
      <button onClick={handleClick}>페이지 이동</button>
      <button onClick={handleReplace}>페이지 이동 (replace)</button>
    </div>
  );
}