web-dev-qa-db-ja.com

React Webpackの実動ビルドが空白ページを表示しているのはなぜですか？

反応アプリを作成していますが、現時点ではwebpack-dev-serverは正常に動作します（hello worldテキストが表示されます）、しかしwebpack -pは空白ページを表示します。本番ビルドの場合chrome dev toolsの下の[ネットワーク]タブには、index.htmlおよびindex_bundle.jsサイズを0 Bにする（画像を参照） enter image description here しかし、HTMLファイルサイズが227 B＆index_bundle.jsファイルサイズは195Kbです（画像を参照）

またChrome Devtools Elementsタブには以下が表示されます（図を参照） enter image description here

私のwebpack設定ファイルは次のようになります： enter image description here

javascriptweb-applicationsreactjswebpackredux
22
jasan

ローカルサーバーをセットアップせずにbrowserHistoryを使用していました。 hashHistoryに変更すると機能しました。反応ルーターのブラウザー履歴でwebpackの生産をローカルでテストするには、これを行う必要がありましたサーバーの構成：

サーバーは実際のURLを処理する準備ができている必要があります。アプリが最初に/でロードされると、おそらく動作しますが、ユーザーが移動して/ accounts/23で更新を押すと、Webサーバーは/ accounts/23にリクエストを取得します。そのURLを処理し、JavaScriptアプリケーションを応答に含めるために必要になります。

エクスプレスアプリは次のようになります。

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// serve static assets normally
app.use(express.static(__dirname + '/public'))

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

そして、ブラウザ履歴でreact-routerを使用して誰かがfirebaseに展開している場合に備えて、これを行います：

{
  "firebase": "<YOUR-FIREBASE-APP>",
  "public": "<YOUR-PUBLIC-DIRECTORY>",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}
23
jasan

使用する

import { HashRouter } from 'react-router-dom';

の代わりに

import { BrowserRouter} from 'react-router-dom';

あなたのルートコードでそれを置き換えることを忘れないでください

<HashRouter>
  ...
</HashRouter>
5
Yecodeo
<BrowserRouter basename="/calendar" />
<Link to="/today"/> // renders <a href="/calendar/today">

ベース名：文字列
すべての場所のベースURL。サーバー上のサブディレクトリからアプリが提供される場合、これをサブディレクトリに設定する必要があります。適切にフォーマットされたベース名には、先行スラッシュが必要ですが、後続スラッシュは含まれません。

2
Beans

GitHub Pagesは、HTML5 pushState history APIを内部で使用するルーターをサポートしていません（たとえば、React browserHistoryを使用するルーター）。 http://user.github.io/todomvc/todos/42のようなURLの新しいページの読み込みがあります。/todos/42はフロントエンドルートです。GitHubPagesサーバーは/todos/42を何も知らないため404を返します。 GitHubページでホストされているプロジェクトへのルーター、ここにいくつかのソリューションがあります。

  • HTML5履歴APIの使用からハッシュを使用したルーティングに切り替えることができます。 React Router）を使用すると、この効果のためにhashHistoryに切り替えることができますが、URLは長くなり、より冗長になります（たとえば、http://user.github.io/todomvc/#/todos/42?_k=yknaj）。 詳細 React Router。
  • または、特殊なリダイレクトパラメーターを使用してindex.htmlページにリダイレクトすることで、GitHubページで404を処理するようにトリックを使用することもできます。プロジェクトをデプロイする前に、buildフォルダーにリダイレクトコードを含む404.htmlファイルを追加する必要があり、index.htmlにリダイレクトパラメーターを処理するコードを追加する必要があります。この手法の詳細な説明はこちらをご覧ください このガイド 。
2
s4ndhyac