본문으로 건너뛰기

파일 이름 규칙

파일 기반 라우팅에서는 라우트가 올바르게 생성되도록 몇 가지 간단한 파일 이름 규칙을 따라야 합니다. 이 규칙으로 구현되는 개념은 라우트 트리 가이드에서 자세히 설명합니다.

기능설명
__root.tsx루트 라우트 파일의 이름은 __root.tsx여야 하며 구성된 routesDirectory의 루트에 배치해야 합니다.
. 구분자라우트에서 중첩 라우트를 나타내는 문자로 .을 사용할 수 있습니다. 예를 들어 blog.postblog의 자식으로 생성됩니다.
$ 토큰$ 토큰이 있는 라우트 세그먼트는 매개변수화되며 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>

경로 없는 라우트에 대한 자세한 내용은 라우팅 개념 - 경로 없는 레이아웃 라우트 가이드를 참고합니다.