react-router上的刷新页面输出空白页面，未加载bundle.js答案

【问题标题】：Refresh page on react-router outputs blank page, bundle.js is not loadedreact-router上的刷新页面输出空白页面，未加载bundle.js
【发布时间】：2020-05-22 02:20:29
【问题描述】：

只要不刷新页面，我就可以访问所有路径。但是，当我刷新页面时，我得到一个没有错误的空白页面。我查看了许多与此问题相关的答案，但找不到适合我的设置的解决方案。

我正在使用 react-router 和 express，我设置了 historyApiFallback: true 和 publicPath: '/'。我在页面刷新后检查了控制台，没有加载 bundle.js，只加载了 index.html - 这解释了空白页面。我希望有人能对此有所了解。

文件夹结构

public
-- index.html
src
-- client
-- server
   -- index.js
webpack.config.js

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const outputDirectory = 'dist';

module.exports = {
  entry: ['babel-polyfill', './src/client/index.js'],
  output: {
    path: path.join(__dirname, outputDirectory),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    },
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
            modules: true
          }
        },
        'sass-loader'
      ],
      include: /\.module\.scss$/
    },
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      exclude: /\.module\.scss$/
    },
    {
      test: /\.(png|woff|woff2|eot|ttf|svg|gif)$/,
      loader: 'url-loader?limit=100000'
    }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  devServer: {
    port: 3000,
    open: true,
    proxy: {
      '/': 'http://localhost:8080'
    },
    historyApiFallback: true
  },
  plugins: [
    new CleanWebpackPlugin([outputDirectory]),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      favicon: './public/favicon.ico'
    })
  ]
};

server.js

require('dotenv').config()
const express = require('express')

const { logger, session } = require('./loader')
const auth = require('./api/middleware/authentication')
const { authRoute, sendRoute } = require('./api/routes')


const app = express();

app.use(session);

app.use(express.json())

app.use(express.static('dist'))

// API routes
app.use('/auth', authRoute)
app.use('/send', auth, sendRoute)

app.listen(process.env.PORT || 8080, () => {
  logger.info(`Listening on port ${process.env.PORT || 8080}!`)
})

App.js sn-p

<Switch>
  <Route path="/" exact><LandingPage /></Route>
  <Route path="/login">
    <Container maxWidth="lg" className={classes.container}>
      <Login />
    </Container>
  </Route>
  <Route path="/end"><EndPage /></Route>
</Switch>

【问题讨论】：

标签： reactjs express webpack react-router webpack-dev-server

【解决方案1】：

我遇到了同样的问题，正在寻找解决方案。我尝试了一些东西，它现在可以在生产和开发模式下工作。开发模式通过添加historyApiFallback: true 和publicPath: '/'（您已经拥有）使其工作。生产模式见下文。我只是一个初学者，这是我的第一个答案，所以请随时纠正我。

在您的快速服务器文件 server.js（或 index.js）中，我添加了以下内容：

const path = require('path');

app.get("/*", function (req, res) {
  res.sendFile(path.join(__dirname, "path/to/your/index.html"), function (err) {
    if (err) {
      res.status(500).send(err);
    }
  });
});

然后，在我添加的“根”div 下方的公共 index.html 中：

<script src="/bundle.js"></script>

我认为它可以工作，因为它将所有请求发送回 index.html，它现在有 bundle.js 的脚本，但我不确定。在网站的主页/页面上，它不会两次加载 bundle.js，这很酷。

【讨论】：