本記事はAIエージェントと一緒に記事作成されました

React Router v7でbasenameをURLの第一セグメントにする

2025/05/31（土）

この記事は2025/09/04（木）にメンテナンスが行われています。

React Router v7で「basenameを自動的にURLの第一セグメントにしたい」という要望について、Framework mode・Data modeそれぞれの挙動や実装例、現状の結論をまとめます。

背景・要望

アプリケーションをサブディレクトリ配下で動作させる場合など、basenameをURLの第一セグメントに自動的に合わせたいケースがあります。

Framework modeでの検証

Framework modeでは、react-router.config.tsでbasenameを静的に指定する必要があります。

export default {
  basename: '/foo',
  // ...routes
}

このため、URLの第一セグメントを自動的にbasenameにすることはできません。

試行錯誤したコード全文

実際に、entry.client.tsxなどで動的にbasenameを取得しようと試みましたが、Framework modeではこの方法は反映されませんでした。

import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import routes from "./routes";
import { createBrowserRouter, RouterProvider } from "react-router";
import type { RouteObject } from "react-router";

function getBasename(): string {
  const path = window.location.pathname.replace(/\/+$/, "");
  const segs = path.split("/").filter(Boolean);
  const base = segs.length > 0 ? `/${segs[0]}` : "/";
  console.log("[entry.client] computed basename:", base);
  return base;
}

const basename = getBasename();
const router = createBrowserRouter(routes as unknown as RouteObject[], {
  basename,
});

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <RouterProvider router={router} />
    </StrictMode>
  );
});

Framework modeでbasenameをreact-router.config.tsで指定するのではなくURLの第一セグメントにしたいのですが、どうも上手く行かない
Xでの投稿: https://x.com/_cofus/status/1917298136088994058

Data modeでの実装

一方、Data modeではcreateBrowserRouterのオプションでbasenameを動的に指定できるため、URLの第一セグメントをbasenameにすることが可能です。

import { createBrowserRouter } from 'react-router'
import { routes } from './routes-config'

function getBasename(): string {
  const path = window.location.pathname.replace(/\/+$/, '')
  const segments = path.split('/').filter(Boolean)
  const base = segments.length > 0 ? `/${segments[0]}` : '/'
  console.log('[entry.client] computed basename:', base)
  return base
}

const basename = getBasename()

export const router = createBrowserRouter(routes, {
  basename
})

Data modeに変更してbasenameもURLの第一セグメントにできてハッピー
Xでの投稿: https://x.com/_cofus/status/1917604090026287293

結論

Framework modeではreact-router.config.tsで静的にしかbasenameを指定できず、URLの第一セグメントを自動でbasenameにすることはできなかった（2025年5月時点、筆者検証）
Data modeではcreateBrowserRouterのオプションで動的にbasenameを指定できるため、URLの第一セグメントをbasenameにしたい場合はData mode推奨

参考リンク

本記事内容は2025年5月時点の情報です。今後のアップデートで仕様が変わる可能性もあるため、最新情報は公式ドキュメントやIssueもご確認ください。