JavaScript
reactjs
React
react-router

react-router でURLを直打ちしたときにアセットを正しく表示できない。

現象

react-router を使っていて、/users/:id のようなネストしたURLを直打ちした際、アセット(今回は画像)をうまく表示してくれなかった。

解決策

↓のようなかんじで、絶対パスで指定する必要がある。

before

<img
  src="images/hoge.png"
  alt="Hoge"
/>

after

<img
  src="/images/hoge.png"
  alt="After"
/>