🏃♂️
Reactで初期のサイトパスを変更する方法
概要
Reactでサイト起動時、初期状態だとhttp://localhost:3000
で起動する
これを、http://localhost:3000/app/
のようにルートパス以外で起動させたい
本記事では、このようなReactでサイトのベースパスを変更する方法を紹介する
解決策
以下、2点の修正を行う
-
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
でアクセス出来るようになった。
まとめ
- サイトの初期パスを変更するために2つのファイルを修正した
- 1つ目は、
package.json
に"homepage": "/app"
を追加 - 2つ目は、React Routerで
<BrowserRouter basename='/app'>
を設定 -
http://localhost:3000/app
でアクセス出来るようになる
参考サイト
Discussion