GitHub pagesでリンク先に飛べなかった

起こった現象

Reactで作ったプロジェクトをGithub pagesで公開した。
muiのLinkで作ったあるボタンから他ページへ遷移させたところ、404エラーでページが表示されなかった。
不思議な点としてuseNavigate()からそのリンクに移る時はページが表示される。

解決方法

変更前のボタン

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

export const HogePresenter = () => {
      return (
          <Link
              href="/page"
          >
              {"押したらページ遷移する"}
          </Link>
      );  
};

変更後のボタン

import { Link } from "@mui/material";
import { Link as RouterLink } from "react-router-dom";

export const HogePresenter = () => {
      return (
          <Link
              component={RouterLink}
              to="/page"
          >
              {"押したらページ遷移する"}
          </Link>
      );  
};

なぜこれで直ったのか

まず前提として、Github pagesを自分だけで見られるようにprivateに設定していた。
おそらくこれの影響で、Linkのhrefからのアクセスだと受け付けないようになっていたのだと思う。

Github pagesがどうやってページを非公開にしているのか仕組みがよくわからなかったが、関係ある気がする。

参考資料