React Router 튜토리얼

작지만 기능이 풍부한 싱글 페이지 애플리케이션을 만들어 봅니다.

실습 저장소

총 32단계로 구성된 튜토리얼 실습 내용은 개별 브랜치로 아래 저장소에 구성되어 있습니다.

GitHub - yamoo9/react-router-v6.4: React Router v6.4+ 튜토리얼

설정

Vite 빌드 도구를 사용해 프로젝트를 구성합니다. (React + TypeScript)

npm create vite@latest <프로젝트_이름>

프로젝트에 종속성 패키지를 설치합니다.

npm i react-router-dom@6 [localforage](<https://www.npmjs.com/package/localforage>) [match-sorter](<https://www.npmjs.com/package/match-sorter>) [sort-by](<https://www.npmjs.com/package/sort-by>) 
npm i -D [@types/node](<https://www.npmjs.com/package/@types/node>) [@types/sort-by](<https://www.npmjs.com/package/@types/sort-by>)

package.json 스크립트 명령을 다음과 같이 수정합니다.

{
  "scripts": {
    **"start": "npm run dev -- --open",
    "dev": "vite --host --port=3000"**
  }
}

React + Vite 앱을 구동합니다.

npm run dev

그 외 수정해야 할 프로젝트 파일 코드는 02-add-router 브랜치에서 확인합니다.

• 수정할 파일 / 디렉토리 목록

라우터 추가

createBrowserRouter 함수를 사용해 브라우저 라우터를 생성하고 첫번째 라우트(route)를 구성합니다. 이 구성을 RouterProvider 컴포넌트 router prop으로 설정하면 클라이언트 사이드 라우팅이 활성화됩니다.