[React] Router, Routes, Route, Link, NavLink, Navigate

React Router란?

React Router는 리액트 애플리케이션에서 여러 페이지를 관리하고, 페이지 간에 탐색할 수 있도록 도와주는 라이브러리입니다. 사용자들은 한 페이지에서 다른 페이지로 이동할 수 있으며, URL에 따라 컴포넌트를 로드할 수 있습니다.

 

React Router의 핵심 컴포넌트는 Router, Routes, Route, Link 네 가지입니다.

 

설치 방법

아래 명령어를 사용하여 React Router를 설치해야 합니다.

npm install react-router-dom

 

Router

Routersms React Router에서 페이지의 현재 URL과 페이지 기록 데이터를 가지고 관리합니다. React Routrer의 다른 기능을 사용하려면, 모든 컴포넌트를 Router 컴포넌트 내부에 감싸야 합니다. 보통 애플리케이션의 최상위 컴포넌트를 감싸고 사용하여 전체 애플리케이션에서 라우팅이 가능하게 합니다.

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

function App() {
  return (
    <BrowserRouter>
      {/* 다른 컴포넌트들 */}
    </BrowserRouter>
  );
}

export default App;

 

Routes, Route

Routes와 Route는 특정 URL 경로와 매칭되는 컴포넌트를 렌더링합니다. Routes 컴포넌트 안에 여러 개의 Route를 정의할 수 있으며, 각 Route에는 path와 element 속성이 필요합니다. path는 URL 경로로 나타내고, element는 렌더링할 컴포넌트를 지정합니다.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';
import CodeListPage from './CodeListPage';
import CodePage from './CodePage';
import NotFoundPage from './NotFoundPage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="code" element={<CodeListPage />} />
        <Route path="code/1" element={<CodePage />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

• / : 홈 페이지(HomePage)를 렌더링
• /code : 코드 리스트 페이지(CodeListPage)를 렌더링
• /code/1 : 특정 코드 페이지(CodePage)를 렌더링
• * : 모든 경로에 매칭되지 않는 경우, NotFoundPage 컴포넌트가 렌더링

Link

Link 컴포넌트는 페이지 간의 네비게이션을 담당하며, <a> 태그와 비슷하게 작동하지만, 페이지 새로고침 없이 URL을 변경하여 SPA(Single Page Application)의 장점을 유지할 수 있습니다.

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

function Navigation() {
  return (
    <nav>
      <Link to="/">홈페이지</Link>
      <Link to="/code">코드 탐색</Link>
      <Link to="/questions">커뮤니티</Link>
    </nav>
  );
}

 

<Link> 컴포넌트의 to 속성에 경로를 지정하여 사용자가 해당 경로로 이동할 수 있도록 합니다.

---

Route 컴포넌트 중첩하여 페이지 나누기

React Router를 사용하여 하위 페이지를 구성할 때, Route 컴포넌트를 중첩하여 사용할 수 있습니다. 이때 최상위 경로에 해당하는 경로를 설정할 때는 path prop 대신 index prop을 사용하여 지정할 수 있습니다.

<Routes>
  <Route path="/">
    <HomePage />
  </Route>
  
  <Route path="posts" element={<PostLayout />} >
    <Route index element={<PostListPage />} />
    <Route path="1" element={<PostPage />} /> // "/posts/1"
  </Route>
</Routes>

---

NavLink

React Router의 NavLink 컴포넌트를 사용하면 링크의 활성화 상태에 따라 스타일을 적용할 수 있습니다. NavLink는 현재 URL 경로와 일치하는 링크를 자동으로 감지하여 스타일을 변경할 수 있는 기능을 제공합니다.

function getLinkStyle({ isActive }) {
  return {
    color: isActive ? "red" : undefined,
  };
}

<ul>
  <li>
    <NavLink to="/Boards" style={getLinkStyle}>
      게시판
    </NavLink>
  </li>

  <li>
    <NavLink to="/myPage" style={getLinkStyle}>
      마이페이지
    </NavLink>
  </li>
</ul>

 

위 코드에서 getLinkStyle 함수는 isActive라는 매개변수를 사용하여 현재 링크가 활성화되어 있는지를 판단합니다. 만약 링크가 활성화 되면, 링크의 텍스트 색상을 red로 설정하고, 그렇지 않으면 기본 스타일을 유지하도록 합니다.

---

Navigate

React Router에서 Navigate 컴포넌트를 사용하면 특정 조건을 만족하지 않을 때 다른 경로로 리다이렉트할 수 있습니다. URL이 변경되도록 하여 사용자가 다른 페이지로 이동하게 만들 수 있습니다.

const { boardSlug } = useParams();
const board = getBoardBySlug(boardSlug);

if (!board) {
  return <Navigate to="/boards" />;
}

 

위 코드에서 useParams 훅을 사용하여 URL 파라미터에서 boardSlug를 가져옵니다. 이후 getBoardBySlug 함수를 호출하여 해당 과정 정보를 조회하고, 조회된 과정이 존재하지 않는다면 /board 경로로 리다이렉트합니다.