무경로 레이아웃 경로 리믹스

shared layouts in Remix 만드는 방법을 알았으므로 공유 레이아웃은 원하지만 공유 경로는 원하지 않는 경우가 있을 수 있습니다.

예를 들어 하나의 레이아웃을 공유하는 여러 인증 경로를 도입하려는 경우 어떻게 됩니까?
auth 폴더로 가서 login.tsx 및 register.tsx 와 같은 파일을 만들 수 있습니다.

그게 통할거야, 그렇지?
대답은 '예'입니다.

그러나 이 접근 방식의 단점은 /auth 접두사가 붙은 모든 URL을 얻는다는 것입니다.
http://mywebsite.com/auth/loginhttp://mywebsite.com/auth/register
Remix는 이 문제에 대한 경로 없는 레이아웃 경로를 제시했습니다.

Remix의 경로 없는 레이아웃 경로

이러한 경로 없는 레이아웃 경로의 기본 아이디어는 레이아웃을 공유할 수 있지만 URL 세그먼트로 읽히지 않는다는 것입니다.

이를 사용하려면 폴더 앞에 두 개의 밑줄을 붙여야 합니다: __auth .

그리고 레이아웃 파일의 경우 동일하게 __auth.tsx 접두사를 붙입니다.

이 로그인 페이지를 설정하여 실제로 작동하는지 확인하십시오.

먼저, route 디렉토리 안에 __auth 폴더를 만듭니다.

그런 다음 기본 인증 레이아웃을 보유할 레이아웃 파일을 생성합니다.
이 파일은 __auth.tsx라고 하며 경로 디렉토리의 루트에 있습니다.

먼저 기존 login 또는 register 경로를 제거하고 login.tsx 디렉토리 내에 register.tsx 및 __auth를 만듭니다.

각각 다음과 유사한 파일을 가질 수 있습니다.

export default function Login() {
  return <p>This is the login page</p>;
}

Note: Make sure to rename the function name and the actual copy.

이제 웹 사이트를 실행하면 /login 및 /register 로 이동할 수 있으며 인증 레이아웃이 계속 유지됩니다!



꽤 멋진 것, 리믹스!

GitHub에서 완성된 코드를 찾을 수도 있습니다.

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

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