概要
Reactでサイト起動時、初期状態だとhttp://localhost:3000で起動する
これを、http://localhost:3000/app/のようにルートパス以外で起動させたい
本記事では、このようなReactでサイトのベースパスを変更する方法を紹介する
解決策
以下、２点の修正を行う
-
package.jsonにhomepageを追加 -
React Router v6（最新）でルーティングを設定
package.jsonの修正
package.jsonにhomepage要素を追加し、変更したいパスを書く
package.json
{
"name": "sample-react",
+ "homepage": "/app",
"version": "0.1.0",
"private": true,
"dependencies": {
...
}
}
これで、ビルド時にすべてのアセットのパス（favicon.icoやmanifest.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でアクセス出来るようになった。
まとめ
- サイトの初期パスを変更するために２つのファイルを修正した
- 1つ目は、
package.jsonに"homepage": "/app"を追加 - 2つ目は、React Routerで
<BrowserRouter basename='/app'>を設定 -
http://localhost:3000/appでアクセス出来るようになる
参考サイト
Discussion