리믹스 경로 규칙 맞춤설정

나는 여러 가지 이유로 Remix을 사랑합니다. 데이터 가져오기를 관리하는 방법, 순수한 html에 더 가까운 형식 또는 중첩 경로.
내가 특히 좋아하는 한 가지는 사용자 지정 가능한 파일 시스템 라우팅 규칙입니다.
이 게시물에서 볼 수 있듯이 고유한 라우팅 규칙을 정의할 수 있습니다.

평평한 경로를 리믹스

npm 패키지remix-flat-routes의 게시를 통해 이 가능성을 발견했습니다.
간단히 말해서 remix.config.js 구성 파일을 수정하는 것으로 충분합니다.

리믹스 기능 경로

개인적으로 저는 기능별로 파일을 정리하는 것을 좋아합니다. 이전 규칙의 문제점은 경로 폴더에 있는 모든 파일이 유효한 경로라는 것입니다. 그건 내가 원하는 게 아니야.
예를 들어 기능에 메서드 파일을 추가할 수 있기를 원하지만 이 파일을 경로로 간주하지 않습니다.
나는 이 컨벤션을 위해 나만의 패키지를 작성했습니다: @remix-routes/feature
경로는 경로 폴더에 있는 폴더 또는 중첩 폴더의 파일만 됩니다. 경로 폴더에 폴더가 있으면 해당 페이지는 index.tsx가 되고 중첩 페이지는 하위 폴더에 경로가 됩니다.
자세한 내용은 documentation을 참조하십시오.
이를 사용하기 위해 remix.config.js에서 이 규칙을 정의합니다.

const { defineFeatureRoutes } = require('@remix-routes/feature');
module. exports = {
  ignoredRouteFiles: ['**/*'],
  routes: async(defineRoutes) => {
    return defineFeatureRoutes('app', 'routes', 'routes', defineRoutes);
  },
};

나만의 컨벤션 맞춤설정

자신만의 컨벤션을 작성하고 싶다면 지금 어떻게 하는지 설명하겠습니다.

경로 리믹스

리믹스 루트 컨벤션 작성을 단순화하기 위해 패키지를 게시했습니다@remix-routes/core.

사용 방법을 알려드린 다음 작동 방식을 설명하겠습니다.

설정

먼저 이 패키지를 설치합니다.

yarn add -D @remix-routes/core

그런 다음 remix.config.js를 맞춤설정하세요.

const { defineRemixRoutes } = require('@remix-routes/core');
module. exports = {
  ignoredRouteFiles: ['**/*'],
  routes: async(defineRoutes) => {
    return defineRemixRoutes(appDir, routesDir, defineRoutes, myConvention);
  },
};

appDir은 리믹스 앱 폴더의 이름입니다. 기본값은 '앱'입니다.

routeDir은 경로 폴더의 이름입니다. 기본값은 '경로'입니다.

myConvention은 경로 폴더에 있는 파일 이름 목록을 가져오고 경로의 ID를 키로 사용하고 이러한 경로에 사용되는 파일을 값으로 반환하는 사용자 지정 함수가 됩니다.

컨벤션 정의

경로 ID 키와 파일 이름 값이 있는 개체 파일을 생성하는 규칙 기능을 만듭니다.

const myConvention = (routesDir: string, outletDir: string) => (filesList: string[]) => {
  let files: Record<string, string> = {};

  for (const file of filesList) {
    if (isRouteModuleFile(file) && isRouteFile(file, outletDir)) {
      let routeId = createRouteId(path.join(routesDir, file), outletDir);
      if (!files[routeId]) {
        files[routeId] = path.join(routesDir, file);
      } else {
        console.error('[Define routes] routeId is already defined :', routeId);
      }
    }
  }

  return files;
};

어떤 파일이 경로인지 정의

import { stripFileExtension } from '@remix-routes/core';

function isRouteFile(filename: string, outletDir: string): boolean {
  const path = filename.split('/');
  if (path.length === 1) {
    return true;
  }
  if (path.length === 2 && stripFileExtension(path[1]) === 'index') {
    return true;
  }
  if (path[1] === outletDir && path[0] !== 'index') {
    return isRouteFile(path.slice(2).join('/'), outletDir);
  }

  return false;
}

stripFileExtension은 확장자 없이 파일 이름을 반환합니다.

파일 이름으로 경로 ID 생성

import { normalizeSlashes, stripFileExtension } from '@remix-routes/core';

function createRouteId(file: string, outletDir: string) {
  let path = normalizeSlashes(stripFileExtension(file));

  if (path.length > 2 && path[path.length - 1] === 'index') {
    if (path[path.length - 2] === outletDir) {
      path.splice(-2, 1);
    } else {
      path.splice(-1, 1);
    }
  }
  path = path.filter((name, i) => i === 0 || name !== outletDir);

  return path.join('/');
}

normalizeSlashes는 라우터 경로의 배열을 반환합니다.

예시 :
'경로/인증/로그인' => ['경로', '인증', '로그인']
'routes/auth.logout' => ['라우트', '인증', '로그아웃']

설명

마지막으로 우리는 그것이 어떻게 일어나는지 자세히 볼 것입니다.
리믹스 구성의 route 속성은 해당 경로를 정의할 수 있는 메서드를 매개변수로 받는 메서드를 예상합니다.
파일에 대한 경로를 정의할 때마다 이 메서드를 호출해야 합니다.
기본 아이디어는 폴더를 탐색하여 폴더에 할당될 URL과 함께 포함할 모든 파일을 나열한 다음 defineRoutes 메서드를 호출하여 구성에 대해 선언하는 것입니다.

@remix-routes/core는 경로 폴더의 모든 채우기를 방문하여 컨벤션 콜백을 위해 나열합니다. 그런 다음 경로 ID를 기반으로 리믹스 경로와 중첩된 경로를 정의하기 위해 규칙 결과 개체를 가져옵니다.

결론

이 기사가 마음에 드셨으면 합니다.
이제 고유한 규칙을 정의하는 방법을 알았으므로 고유한 규칙을 만드는 것은 사용자에게 달려 있습니다.