キーワード†

• 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')

参考†

• React Router paths don’t match after deploying to GitHub Pages with hashHistory · Issue #2218 · facebookincubator/create-react-app

関連†

• React/ベースURLを設定する