🏃‍♂️

Reactで初期のサイトパスを変更する方法

2022/08/08に公開

概要

Reactでサイト起動時、初期状態だとhttp://localhost:3000で起動する
これを、http://localhost:3000/app/のようにルートパス以外で起動させたい

本記事では、このようなReactでサイトのベースパスを変更する方法を紹介する

解決策

以下、2点の修正を行う

  • package.jsonにhomepageを追加
  • React Router v6(最新)でルーティングを設定

package.jsonの修正

package.jsonhomepage要素を追加し、変更したいパスを書く

package.json
{
  "name": "sample-react",
+ "homepage": "/app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
  }
}

これで、ビルド時にすべてのアセットのパス(favicon.icomanifest.jsonなど)がindex.html上で相対的に読み込まれるようになる

ルーティングの設定

サイトのベースパスを考慮したルーティングを設定するには、React Router v6が提供する<BrowserRouter>コンポーネントのbasename要素を次のように設定する

App.ts
import { BrowserRouter, Routes, Route } from 'react-router-dom'

function App() {
  return (
-  <BrowserRouter>
+  <BrowserRouter basename='/app'>
      <Routes>
        <Route path='/' element={<HomePage />} />
        <Route path='/sample' element={<SamplePage />} />
      </Routes>
    </BrowserRouter>
  );
}

basenameを設定することで、アプリのすべてのルートに自動的に追加されるようになる。

これで、http://localhost:3000/appでアクセス出来るようになった。

まとめ

  • サイトの初期パスを変更するために2つのファイルを修正した
  • 1つ目は、package.json"homepage": "/app"を追加
  • 2つ目は、React Routerで<BrowserRouter basename='/app'>を設定
  • http://localhost:3000/appでアクセス出来るようになる

参考サイト

https://www.kindacode.com/article/how-to-change-the-base-path-in-react/

株式会社ZOZO

Discussion