障害メモ/react-router-domでベースURLが抜ける

キーワード

  • react
  • react-router-dom
  • PUBLIC_URL
  • axios
  • http

現象

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>

備考

httpするときのリソースパスにも注意。次のように書ける。

Axios.get(process.env.PUBLIC_URL + '/manifest.json')

参考

関連

作成日 2017-12-14