[코드잇]리액트 라우터 - 1. Router, Routes, Link, 잘 못된 경로의 페이지

ReactRouter

리액트 컴포넌트로 페이지를 나누는 라이브러리

• 핵심 컴포넌트 : Router, Routes, Route, Link

📖 Router

리액트 라우터에서 사용하는 모든 데이터들(현재주소, 페이지 기록 등)을 가지고 있다.
라우터에서 제공하는 기능을 사용하려면 반드시 Router 컴포넌트 안에서 사용해야 한다.

• 일반적으로 최상위 컴포넌츠 안에서 Router를 감싸고 사용한다.

import { BrowserRouter } from 'react-router-dom';
function App(){
  return <BroserRouter> ... </BroserRouter>;
}

export default App;

🔗 Router Components 에서 <BroserRouter>외 다른 라우터들도 확인할 수 있다.

📖 Routes, Route

Routes 컴포넌트 안에서 Route 컴포넌트로 페이지 경로와 보여줄 컴포넌트를 표시한다.

// "/" 루트 경로로 가면 "<HomePage />" 컴포넌츠를 보여준다.
<Routes>
<Route path="/" element={<HomPage />} />
<Route path="courses" element={<CoursePage />} />
<Route path="*" element={<NotFoundPage />} />
<Routes/>

📖 Link

<a> 태그 대신 사용된다.

<Link to="/"> 홈페이지 </Link>
<Link to="/courses"> 수업 탐색 </Link>

📖 NavLink

네비게이션에 사용할 수 있는 링크로, style로 함수를 내려줄 수 있다.
스타일 함수의 파라미터로 객체를 받는다.
객체의 프로퍼티로isActive를 받아올 수 있는데, 현재 페이지의 경로가 네비게이션의 링크에 해당하면 true, 해당하지 않으면 false 값을 갖는다.

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

// 현재 페이지가 해당 스타일의 링크의 경로이면 밑줄을 긋는 함수
function getLinkStyle({ isActive }) {
  return {
    textDecoration: isActive ? "underline" : undefined,
  };
}

function Nav() {
  return (
      <Container>
        <ul className={styles.menu}>
{/* 카탈로그페이지일 땐 "카탈로그"에 밑줄, 커뮤니티 페이지일 땐 "커뮤니티"에 밑줄*/}
          <li> 
            <NavLink to="/courses" style={getLinkStyle}>
              카탈로그
            </NavLink>
          </li>

          <li>
            <NavLink to="/questions" style={getLinkStyle}>
              커뮤니티
            </NavLink>
          </li>
        </ul>
      </Container>
  );
}

📖 메인에서 잘못된 경로 처리 : *

URL의 경로에 대해서 <Routes> 안에서 <Route> 들을 위에서 아래로 차례대로 검사하다가 해당 경로에 보여줄 컴포넌츠가 없으면 빈 페이지가 나오게 된다.

모든 잘못된 경로에 대해 보여줄 컴포넌트를 추가하기 위해서는 가장 마지막 <Route>를 추가하고, 모든 경로를 나타내는 *를 path로 지정하면 된다.

<Route path="*" element={<잘못된 경로에 대한 컴포넌츠 />} />

import NotFoundPage from "./pages/NotFoundPage";

function Main() {
  return (
    <BrowserRouter>
      <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/courses" element={<CourseListPage />} />
          <Route path="/wishlist" element={<WishlistPage />} />
        
        {/* 위 경로들을 제외한 다른 경로로 접속했을 때 보여줄 컴포넌츠*/}
          <Route path="*" element={<NotFoundPage />} />
          
      </Routes>
    </BrowserRouter>
  );
}

참고 : 🔗 코드잇 React로 웹사이트 만들기