S3でreact-routerを使うと表示がおかしくなる（React.js）

Question

React.jsを使ってSPAのアプリを作っています。
webpackを使ってbundleし、htmlとcss,jsをS3に乗せて、静的webサイトホスティングをしています。
アプリはSPAで、react-routerを使っているのですが、S3に乗せた時、配置した画像や文字が表示されません。ただ、メニューボタンなどは読み込めているようで、押下できます。

react-routerを使用しており、
URLは

<li><Link to='/'>home</Link></li>
<li><Link to='/about'>about</Link></li>
<li><Link to='/info'>info</Link></li>

と設定しております。

表示がおかしくなるのは

https://s3-ap-northeast-1.amazonaws.com/＜バケット名＞/index.html

などのように、バケット名つきでアクセスしたときです。

https://s3-ap-northeast-1.amazonaws.com/about

などと、バケット名以降がない状態のURLだとうまく表示されます。
どうすれば解決できるでしょうか。

Answer 1

パスにバケット名を使う場合

https://s3-ap-northeast-1.amazonaws.com/＜バケット名＞/index.html

から/abountを参照するとhttps://s3-ap-northeast-1.amazonaws.com/aboutにアクセスします。
バケット名が含まれないので、<li><Link to='about'>about</Link></li>にすればよいかと。

FQDNにバケット名を使う場合

http://＜バケット名＞.s3-ap-northeast-1.amazonaws.com/index.html

この場合は<li><Link to='/about'>about</Link></li>でいけます。