質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.85%

  • React.js

    598questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 22

spartan

score 0

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

具体的には、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"
}

コード

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.85%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • React.js

    598questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。