Question

我正在构建一个反应应用程序，目前webpack-dev-server工作正常（ hello world 文本显示），但webpack -p显示空白页面。对于生成版本Chrome开发工具下的网络选项卡，显示index.html和index_bundle.js的大小为0 B（参见图片）但显然并非如此HTML文件大小为227 B＆amp; index_bundle.js文件大小为195Kb（参见图片）

Chrome Devtools Elements标签显示以下内容（见图片）

我的webpack配置文件如下所示：

Answer 1

我想通了，我在没有设置本地服务器的情况下使用了browserHistory。如果我把它改成hashHistory它就有效了。要使用react-router浏览器历史记录在本地测试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"
    }
  ]
}

Answer 2

使用

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

而不是

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

并且不要忘记在路线代码中替换它

<HashRouter>
  ...
</HashRouter>

Answer 3

GitHub Pages不支持使用HTML5 pushState历史API的路由器（例如，使用browserHistory的React Router）。这是因为，当为http://user.github.io/todomvc/todos/42之类的URL重新加载页面时，其中/todos/42是前端路由，GitHub Pages服务器返回404，因为它对/todos/42一无所知。如果要将路由器添加到托管在GitHub Pages上的项目中，请使用以下两种解决方案：

您可以从使用HTML5历史记录API切换到带有哈希值的路由。如果您使用React Router，则可以切换到hashHistory以获得此效果，但是URL会更长且更冗长（例如http://user.github.io/todomvc/#/todos/42?_k=yknaj）。 Read more关于React Router中不同历史记录的实现。
或者，您可以使用技巧来教导GitHub Pages处理404，方法是使用特殊的重定向参数重定向到您的index.html页面。在部署项目之前，您需要将带有重定向代码的404.html文件添加到build文件夹中，并且需要向index.html添加处理重定向参数的代码。您可以找到有关此技术in this guide的详细说明。

Answer 4

更改

import {BrowserRouter as Router} from 'react-router-dom'

收件人：

import {HashRouter as Router} from 'react-router-dom'

App.js 中的

帮助我解决了create-react-app项目中的相同问题。

Answer 5

这些都不适合我，我的错误是因为我混淆了文件夹

解决方案：

npm run build

我的Apache配置：

无效

DocumentRoot /var/www/sites/example.com/client/public/

有效（构建文件夹不公开）

DocumentRoot /var/www/sites/example.com/client/build/

Answer 6

<BrowserRouter basename="/calendar" />
<Link to="/today"/> // renders <a href="/calendar/today">

基本名称：字符串
所有位置的基本URL。如果您的应用是通过服务器上的子目录提供的，则需要将其设置为子目录。格式正确的基本名称应以斜杠开头，但不能以斜杠结尾。

Answer 7

我有一个独特的解决方案-只有一页没有为我运行。因此，我只是检查了控制台日志并发现了错误。由于某种原因，该错误仅针对“ react-scripts-build”而不是“ react-scripts-start”显示。

这导致空白页

为什么React Webpack生产版本显示空白页面？

7 个答案: