파일 이름 규칙
파일 기반 라우팅에서는 라우트가 올바르게 생성되도록 몇 가지 간단한 파일 이름 규칙을 따라야 합니다. 이 규칙으로 구현되는 개념은 라우트 트리 가이드에서 자세히 설명합니다.
| 기능 | 설명 |
|---|---|
__root.tsx | 루트 라우트 파일의 이름은 __root.tsx여야 하며 구성된 routesDirectory의 루트에 배치해야 합니다. |
. 구분자 | 라우트에서 중첩 라우트를 나타내는 문자로 .을 사용할 수 있습니다. 예를 들어 blog.post는 blog의 자식으로 생성됩니다. |
$ 토큰 | $ 토큰이 있는 라우트 세그먼트는 매개변수화되며 URL pathname의 값을 라우트 param으로 추출합니다. |
_ 접두사 | _ 접두사가 있는 라우트 세그먼트는 경로 없는 레이아웃 라우트로 간주되며 URL pathname에 대해 자식 라우트를 매칭할 때 사용되지 않습니다. |
_ 접미사 | _ 접미사가 있는 라우트 세그먼트는 해당 라우트가 부모 라우트 아래에 중첩되지 않도록 합니다. |
- 접두사 | - 접두사가 있는 파일과 폴더는 라우트 트리에서 제외됩니다. routeTree.gen.ts 파일에 추가되지 않으며 라우트 폴더에 로직을 함께 배치하는 데 사용할 수 있습니다. |
(folder) 폴더 이름 패턴 | 이 패턴과 일치하는 폴더는 라우트 그룹으로 처리되므로 라우트의 URL 경로에 포함되지 않습니다. |
[x] 이스케이프 | 대괄호는 라우팅 의미를 가질 수 있는 파일 이름의 특수 문자를 이스케이프합니다. 예를 들어 script[.]js.tsx는 /script.js가 되고 api[.]v1.tsx는 /api.v1이 됩니다. |
index 토큰 | index 토큰으로 끝나는 라우트 세그먼트(파일 확장자 앞)는 URL pathname이 부모 라우트와 정확히 일치할 때 부모 라우트와 매칭됩니다. indexToken 구성 옵션으로 구성할 수 있으며 문자열과 정규식 패턴을 모두 지원합니다. 옵션을 참고합니다. |
.route.tsx 파일 타입 | 디렉터리를 사용하여 라우트를 구성할 때 route 접미사를 사용하여 디렉터리 경로에 라우트 파일을 만들 수 있습니다. 예를 들어 blog.post.route.tsx 또는 blog/post/route.tsx를 /blog/post 라우트의 라우트 파일로 사용할 수 있습니다. routeToken 구성 옵션으로 구성할 수 있으며 문자열과 정규식 패턴을 모두 지원합니다. 옵션을 참고합니다. |
💡 기억하세요: 프로젝트의 파일 이름 규칙은 구성된 옵션의 영향을 받을 수 있습니다.
동적 경로 매개변수
동적 경로 매개변수는 플랫 라우트와 디렉터리 라우트 모두에서 URL 경로의 동적 세그먼트와 매칭되는 라우트를 만드는 데 사용할 수 있습니다. 동적 경로 매개변수는 파일 이름에서 $ 문자로 나타냅니다.
| 파일 이름 | 라우트 경로 | 컴포넌트 출력 |
|---|---|---|
| ... | ... | ... |
ʦ posts.$postId.tsx | /posts/$postId | <Root><Posts><Post> |
동적 경로 매개변수에 대한 자세한 내용은 경로 매개변수 가이드에서 알아봅니다.
경로 없는 라우트
경로 없는 라우트는 URL 경로가 없어도 로직이나 컴포넌트로 자식 라우트를 감쌉니다. 비경로 라우트는 파일 이름에서 _ 문자로 나타냅니다.
| 파일 이름 | 라우트 경로 | 컴포넌트 출력 |
|---|---|---|
ʦ _app.tsx | ||
ʦ _app.a.tsx | /a | <Root><App><A> |
ʦ _app.b.tsx | /b | <Root><App><B> |
경로 없는 라우트에 대한 자세한 내용은 라우팅 개념 - 경로 없는 레이아웃 라우트 가이드를 참고합니다.