React routerでビルド時だけ404が発生する

Question

現在リアクトを用いてアプリを作っていますが、ルーティングでトラブルが起こっています。

具体的には、React routerを用いてlists.js内でvideo.jsへのリンクをパラメーター付きで張っており、リンクをクリックするとvideoに飛ぶ流れで、開発環境では問題なく動作するのですが、ビルド時のみ404が表示されます。

ビルド時の動作環境はmampでアパッチサーバーで試しました。

リンク構造↓

root link : http://localhost:3000/
video link: http://localhost:3000/video/1234

開発ディレクトリ構成↓

src/
├components/
│ ├ lists.js　　（動画へのリンク一覧を表示
│ └ video.js　（lists.jsからのジャンプ先
├ App.js　　　(lists.jsとvideo.jsをまとめている
└ index.js

ビルド時生成ファイル( npm run build )

build/
├ index.html
├ service-worker.js
├ manifest.json
├ asset-manifest.json
└ static/
└ css/
└ media/
└ js/

開発環境で動作してる状態↓

create-react-appで環境を整えました

App.js

import Video from './components/video';
import Lists from './components/lists';

...

    render() {
        return (
            <BrowserRouter>
                <div className="App">....
                    <div className="col-md-9 col-sm-8">
                        <Route exact path='/'  component={this.state.loading ? this.loading : this.viewList}/>
                        <Route path='/watchvideo/:id' render={props => <Watchvideo {...props}/>}/>
                 ...</div>
                </div>
            </BrowserRouter>
        );
    };
...

lists.js

...

<Link to={`/watchvideo/${video.vid}`} target="_blank">
    ...content....
</Link>

コード

video.js

const Video  = (props) => {
    console.log(props.match.params.id);

    return(
        <div>
            ..content...
        </div>
    );
}

export default Video;
コード

package.json

{
  "name": "jungle",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.1.1",
    "connect": "^3.6.6",
    "cors": "^2.8.4",
    "express": "^4.16.3",
    "file-loader": "^1.1.11",
    "jquery": "^3.3.1",
    "jw-react-pagination": "^1.0.7",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "reactstrap": "^6.1.0",
    "serve-static": "^1.13.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {}
}

コード

ビルド後

manifest.json

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

コード

すみませんがよろしくご教授お願いします。

Answer 1

apacheの.htaccessにリライトを定義したら解決しました

RewriteEngine on
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
コード