- 履歴一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- 障害メモ/react-router-domでベースURLが抜ける へ行く。
- 1 (2017-12-14 (木) 14:33:18)
キーワード†
- react
- react-router-dom
現象†
react-router-domでルーティングしたところベースURLが抜ける。
ベースURLは cross-env で PUBLIC_URL に設定している。
また、次のようにルーティングを定義している。
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/calc">Calculator</Link></li>
<li><Link to="/manif">Manifest</Link></li>
</ul>
<Switch>
<Route path="/calc" component={Calculator} />
<Route path="/manif" component={ManifestDetail} />
<Route exact path="/" component={() => (
<p>Select a page from the menus.</p>
)} />
<Route component={() => (
<p>404 NOT FOUND</p>
)} />
</Switch>
</div>
原因†
PUBLIC_URLに設定するだけではいい感じにやってくれないから（本当？）。
対策†
サブパスも含めて書く。
<div>
<ul>
<li><Link to={`${process.env.PUBLIC_URL}/`}>Home</Link></li>
<li><Link to={`${process.env.PUBLIC_URL}/calc`}>Calculator</Link></li>
<li><Link to={`${process.env.PUBLIC_URL}/manif`}>Manifest</Link></li>
</ul>
<Switch>
<Route path={`${process.env.PUBLIC_URL}/calc`} component={Calculator} />
<Route path={`${process.env.PUBLIC_URL}/manif`} component={ManifestDetail} />
<Route exact path={`${process.env.PUBLIC_URL}/`} component={() => (
<p>Select a page from the menus.</p>
)} />
<Route component={() => (
<p>404 NOT FOUND</p>
)} />
</Switch>
</div>
備考†
なし。