React Router
React Router는 모드(mode)에 따라 동작이 다릅니다. 애플리케이션을 변경하기 전에 모드를 식별하고, 해당하는 참조 문서를 불러온 후, 설치된 패키지 버전의 문서를 읽으십시오.
모드 식별
Framework/Data 패턴을 Declarative 앱에 의도적인 마이그레이션 없이 적용하지 마십시오.
Framework 모드
다음 조건이 보일 때 Framework 모드 가이드를 사용하십시오:
package.json의존성에@react-router/dev가 있음react-router.config.ts파일app/routes.ts파일app/entry.server.tsx및/또는app/entry.client.tsx파일app/routes/아래의 라우트 모듈loader,action,clientLoader,clientAction,ErrorBoundary,meta,links,headers같은 라우트 내보내기(export)./+types/...로부터의 임포트@react-router/dev/vite의 React Router Vite 플러그인
Framework 예제는 일반적으로 기본 app/ 디렉토리를 사용하지만, react-router.config.ts에서 appDirectory 커스텀 여부를 확인한 후 정확한 경로를 가정하십시오.
그런 다음 references/framework-mode.md를 읽으십시오.
Data 모드
다음 조건이 보일 때 Data 모드 가이드를 사용하십시오:
createBrowserRouter,createHashRouter,createMemoryRouter또는createStaticRouter<RouterProvider router={router}>path,children,loader,action,Component,ErrorBoundary,lazy등의 속성을 가진 라우트 객체- Framework Vite 플러그인 없이 Data API를 사용
그런 다음 references/data-mode.md를 읽으십시오.
Declarative 모드
다음 조건이 보일 때 Declarative 모드 가이드를 사용하십시오:
<BrowserRouter>,<HashRouter>또는<MemoryRouter><Routes>및<Route>JSX 라우트 구성element={<Component />}로 전달되는 라우트 컴포넌트- Data 라우터, 라우트 모듈 규칙, loader/action이 없음
그런 다음 references/declarative-mode.md를 읽으십시오.
RSC Framework 및 RSC Data 모드
React Server Components 지원은 아직 불안정하며 Framework와 Data 변형 모두에 존재합니다. 다음 조건이 보일 때 RSC 가이드를 사용하십시오:
unstable_reactRouterRSC@vitejs/plugin-rscunstable_RSCRouteConfigentry.rsc같은 RSC 진입 파일ServerComponent,ServerErrorBoundary,ServerLayout,ServerHydrateFallback"use client","server-only","client-only"같은 React 지시문 또는 경계 패키지
RSC Framework의 경우 references/framework-mode.md와 references/rsc.md를 모두 읽으십시오.
RSC Data의 경우 references/data-mode.md와 references/rsc.md를 모두 읽으십시오.
설치된 문서를 진실의 원천으로 사용
React Router는 패키지에 마크다운 문서를 포함하여 설치된 버전에 맞는 가이드를 제공합니다:
node_modules/react-router/docs/
주요 문서 경로:
node_modules/react-router/docs/index.md
node_modules/react-router/docs/start/
node_modules/react-router/docs/how-to/
node_modules/react-router/docs/explanation/
node_modules/react-router/docs/upgrading/
이 스킬이 react-router/docs/...를 참조할 때, node_modules/react-router/docs/ 아래의 일치하는 파일을 읽으십시오. 설치된 버전에 로컬 문서가 없는 경우 React Router 리포지토리 내에서 작업 중이면 리포지토리의 docs/ 디렉토리를 사용하고, 일반 소비 앱에서는 버전에 맞는 웹사이트 문서로 대체하십시오.
대부분의 문서는 상단 근처에 모드 표시기를 포함합니다:
[MODES: framework, data, declarative]
해당 모드 표시기가 앱 모드와 일치하는 경우에만 문서를 적용하십시오. 작업이 여러 모드에 걸쳐 있는 경우 현재 앱과 일치하는 섹션이나 파일을 우선하십시오.
RSC는 주로 다음 파일에 문서화되어 있습니다:
node_modules/react-router/docs/how-to/react-server-components.md
스킬 참조 문서
모드를 식별한 후 관련 참조 문서를 불러오십시오:
| 참조 문서 | 사용 시기 |
|---|---|
references/framework-mode.md | Framework 모드 또는 RSC Framework 기본 동작 |
references/data-mode.md | Data 모드 또는 RSC Data 기본 동작 |
references/declarative-mode.md | Declarative 모드 |
references/rsc.md | 모든 불안정한 RSC 앱 |
모드 마이그레이션 문서 인덱스
사용자가 명시적으로 모드 전환을 요청하면 대상 모드 참조 문서와 마이그레이션 관련 문서를 읽으십시오:
| 마이그레이션 | 읽어야 할 문서 |
|---|---|
| Declarative → Data | react-router/docs/start/modes.md, react-router/docs/start/data/routing.md, react-router/docs/start/data/data-loading.md, react-router/docs/start/data/actions.md |
| Declarative/Data → Framework | react-router/docs/start/modes.md, react-router/docs/start/framework/routing.md, react-router/docs/start/framework/route-module.md, react-router/docs/how-to/route-module-type-safety.md |
| Framework SPA/SSR/사전 렌더링 변경 | react-router/docs/start/framework/rendering.md, react-router/docs/how-to/spa.md, react-router/docs/how-to/pre-rendering.md, react-router/docs/start/framework/data-loading.md, react-router/docs/start/framework/actions.md |
| 향후 플래그/업그레이드 | react-router/docs/upgrading/future.md 및 react-router/docs/upgrading/ 아래의 관련 파일 |