🛣️

【React (+Vite)】ReactRouterを使用していると、GitHubPagesで正しく表示されない問題

2024/12/11に公開

React

はじめに

RouterRouter を利用した個人サイトを公開しようとしたところ、404 ページが表示されてしまったので、その対処法を記載します。

GitHubPagesへの公開方法

Viteの場合、下記の記事の通りに行うことで公開することができます。

gh-pages のインストール

  npm install gh-pages --save-dev

設定

package.json

+"homepage": "https://kiku09020.github.io/my-page/",

vite.config.ts

export default defineConfig({
  plugins: [react()],
+ base: "/my-page/",
// ...
});

deploy

npm run deploy

問題

ReactRouter を利用しているページ内で、ページ遷移用のリンクを踏んでもページが遷移せずに 404 ページが表示されてしまう

コード

router.tsx

    import { createBrowserRouter } from "react-router-dom";
    import App from "../../App";
    import { routes } from "./route-model";
    import Page from "../../components/Page";

    export default function Router() {
      const router = createBrowserRouter([
        {
          element: <App />,
          children: routes.map((route) => ({
            path: route.path,
            element: <Page title={route.linkName}>{route.element}</Page>,
          })),
        },
      ]);

      return router;
    }

routes.tsx

    type Route = {
      path: string;
      linkName: string;
      element: React.ReactNode;
    };

    export const routes: Route[] = [
      {
        path: "/",
        linkName: "Home",
        element: <Home />,
      },
      {
        path: "/profile",
        linkName: "Profile",
        element: <Profile />,
      },

      {
        path: "/products",
        linkName: "Products",
        element: <Products />,
      },
      {
        path: "/contact",
        linkName: "Contact",
        element: <Contact />,
      },
    ];

link.tsx

  import {Link} from "@mui/material";

  <Link key={route.path} href={route.path}>

原因

localhostとGitHubPagesに公開されるページとで、異なるurlになってしまっている
Link コンポーネントがReactRouterDomではなく、muiのものを利用してしまっていた
- localhostでは問題なく動いていたのに…。

対処法

Routeのpathにリポジトリ名を含める
ReactRouterDomのLinkを利用する

コード