「GitHub Pages」で「React Router」が正常に動かない

2024年6月27日

事象

ローカルでReactプロジェクトを作成して、「GitHub Pages」に公開したところ、「React Router」が正常に動かない（ローカルでは問題なかった）

原因

おそらく「package.jsonのhomepageフィールド」設定したことにより、パスが狂ってしまったため

▽package.jsonを「GitHub Pages」に公開するため「homepage」を追記していた

{
  "homepage": "https://ida240609.github.io/blog-with-react-and-firebase/",
  "name": "blog-with-react-and-firebase",
  "version": "0.1.0",
  "private": true,

…　省略　…

}

解決方法

BrowserRouter as Routerタグにbasename={process.env.PUBLIC_URL}を追記

これにより上記原因のパスの狂いがおこらず正しくページが表示されました

▽App.js

import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';

function App() {
  return (
    <Router basename={process.env.PUBLIC_URL}>
      <Navbar isAuth={isAuth} />
      <Routes>
        <Route path='/' element={<Home />}></Route>
        <Route path='/createpost' element={<CreatePost isAuth={isAuth} />}></Route>
        <Route path='/login' element={<Login setIsAuth={setIsAuth} />}></Route>
        <Route path='/logout' element={<Logout setIsAuth={setIsAuth} />}></Route>
      </Routes>
    </Router>
  );
}

export default App;