React Router

• React 어플리케이션에서 클라이언트 측 라우팅을 제공하는 라이브러리
• SPA에서 URL에 따라 컴포넌트의 동적 렌더링 지원
• React Router의 주요 기능
  • 선언적 라우트 정의
  • 동적 라우팅
  • Link 및 NavLink 를 통한 내비게이션
  • Outlet 을 사용한 레이아웃 구성
  • useNavigate , useLocation 등 내장 훅 제공
  • nested routes 지원
  • 히스토리 관련
  • 코드 스플리팅 지원
  • 인증 및 접근 제어 가능
  • 브라우저 히스토리 또는 해시 히스토리 지원

React Router 인스톨 및 기본 구성

1. React Router 설치

• 최신 버전 설치

npm installl react-router-dom

• 설치 버전을 지정하고 싶은 경우 ‘@버전’ 추가

npm installl react-router-dom@[해당 버전]

2. Router 컴포넌트 생성

• ‘/src/routers’ 경로에 Router.jsx 파일 생성

import { createBrowserRouter, RouterProvider } from "react-router-dom";
const router = createBrowserRouter([
  // router 정의
])
function Router() {
  return <RouterProvider router={router}/>
}
export default Router;

3. main.jsx에 Raouter 등록

• 생성한 Router.jsx 를 import하고 <Router / >를 추가
• 쓰지 않는 기존에 있던 App.jsx 관련 import는 메모리 차지 문제로 삭제

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import Router from './routers/Router.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Router />
  </StrictMode>
);

4. Router로 관리하고 싶은 컴포넌트 만듦

// sc/components/List.jsx
function List() {
  return (
    <>
      <h2>리스트 페이지</h2>
    </>
  )
}

export default List;

// sc/components/Detail.jsx
function Detail() {
  return (
    <>
      <h2>상세 페이지</h2>
    </>
  )
}

export default Detail; // exp > 자동완성 가능