前提

• @remix-run/node@1.19.3
• @remix-run/react@1.19.3
• @remix-run/serve@1.19.3

バージョンは 2 ではないですが、future_flagを使用して、v2 のルーティングシステムを採用しています。

https://remix.run/blog/future-flags

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  future: {
    v2_routeConvention: true,
  },
};

やりたいこと

Remix のアプリにおいてサブパスを設定したい。

例えば

app/
├── routes/
│   ├── _index.tsx
│   └── about.tsx
└── root.tsx

こんな感じのルーティングだったとして、

/hoge/aboutでアクセスしたときにapp/routes/about.tsxが表示されて欲しい。

結論

remix-flat-routesという npm パッケージを使用しましょう。

https://www.npmjs.com/package/remix-flat-routes

const { flatRoutes } = require('remix-flat-routes');

/**
 * @type {import("@remix-run/dev").AppConfig}
 */
module.exports = {
  // ignore all files in routes folder to prevent
  // default remix convention from picking up routes
  ignoredRouteFiles: ['**/*'],
  routes: async (defineRoutes) => {
    return flatRoutes('routes', defineRoutes, { basePath: 'hoge' });
  },
};

簡単に設定できます。

試行錯誤 1

https://remix.run/docs/en/main/discussion/routes#manual-route-configuration

こいつを使って上手くできないものか

// 公式より引用
/** @type {import('@remix-run/dev').AppConfig} */
export default {
  routes(defineRoutes) {
    return defineRoutes((route) => {
      route('/', 'home/route.tsx', { index: true });
      route('about', 'about/route.tsx');
      route('concerts', 'concerts/layout.tsx', () => {
        route('/', 'concerts/home.tsx', { index: true });
        route('trending', 'concerts/trending.tsx');
        route(':city', 'concerts/city.tsx');
      });
    });
  },
};

できなさそう…

試行錯誤 2

https://remix.run/docs/en/main/file-conventions/routes#route-file-naming

全てのファイル名の先頭にv2.をつければ良いのでは

app/
├── routes/
│   ├── v2._index.tsx
│   └── v2.about.tsx
└── root.tsx

いや理想の動作はするけど…

かなりイカしてない。

最後に

https://github.com/remix-run/remix/discussions/2891

Remix のリポジトリでもかなり議論されている模様。

ライブラリ作成感謝。

では

Bye