레이아웃 중첩 없이 중첩된 URL 리믹스

어제 우리는 pathless layout routes 을 만드는 방법을 배웠습니다. 즉, URL 경로를 공유하지 않고 경로 간에 레이아웃을 공유할 수 있습니다.

중첩된 레이아웃이 없는 중첩된 URL이 어떻게 반대로 작동하는지 살펴보겠습니다.

예를 들어 새 게시물을 살펴보겠습니다.
현재 URL 구조는 다음과 같습니다. admin/posts/new .

이것은 훌륭하지만 레이아웃은 다음과 같이 공유됩니다.

- root
-- admin
--- posts
---- new

모든 레이아웃 계층 구조를 상속하지 않고 자체적으로 페이지가 되도록 하려면 어떻게 됩니까?

- root
-- admin
--- new

Remix의 분할된 URL

여기에서 분할된 URL이 매우 유용합니다. 점으로 URL을 분할하여 URL 중첩을 복제할 수 있지만 스타일은 적용하지 않습니다.

이 경우 new.tsx 파일을 관리자 폴더로 이동하고 이름을 posts.new.tsx로 바꿀 수 있습니다.

애플리케이션을 실행하면 URL은 동일하게 유지되지만 posts 레이아웃 항목이 표시되지 않고 관리자 레이아웃만 표시됩니다.



이 다단계를 만들 수도 있습니다. posts.new.tsx 파일을 한 수준 위로 이동하고 이름을 admin.posts.new.tsx 로 바꾸면 어떻게 되는지 봅시다.



놀라운!

보시다시피 Remix는 모든 종류의 사용 사례를 지원할 수 있습니다.
이렇게 세분화된 URL 내에서 동적 매개변수를 사용할 수도 있습니다.

우리는 이것과 경로 없는 경로를 사용하는 기능 사이에 모든 종류의 경로와 레이아웃 계층을 만들 수 있습니다.

이 문서의 코드는 GitHub에서 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나