Question

我已经向Heroku部署了一个React应用程序。它工作正常，但每当我刷新一个不是索引（'/'）的页面时，我就会收到一个错误：无法GET / project / post1 。

我不知道为什么会这样。我将我的快速服务器配置为在所有路由上提供静态文件，但它不起作用。

我的文件结构如下所示：

-dist
   - bundle.js
   - index.html
-server.js

这是我的server.js文件：

  var express = require('express');
  var path = require('path');

  var app = express();

  var isProduction = process.env.NODE_ENV === 'production';
  var port = isProduction ? process.env.PORT : 3000;
  var publicPath = path.resolve(__dirname, './dist');

  app.use(express.static(publicPath));

  app.get('*', function(request, response) {
    response.sendFile(path.join(publicPath))
  });

  // And run the server
  app.listen(port, function () {
    console.log('Server running on port ' + port);
  });

这是我的webpack.prod.config文件：

  var webpack = require('webpack');

  module.exports = {
    entry: {
      main: './src/index.js'
    },
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    output: {
      path: __dirname + '/dist',
      publicPath: '/dist/',
      filename: 'bundle.js'
    },
    module: {
      loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'react-hot!babel'
      },
      {
        test: /\.scss$/,
        loader: 'style!css!sass'
      }]
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          'NODE_ENV': '"production"'
        }
      })
    ]
  };

我在index.html中调用我的bundle.js文件，如下所示：

  <body>
      <div id="app"></div>

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

Answer 1

您的路由发生在客户端，而不是服务器上。 Express不知道它应该对/project/post1上的GET请求做什么。

因此我们将所有请求发送到客户端，在那里您运行react-router。我们可以通过在server.js文件中配置回退来实现这一点，例如：

import fallback from 'express-history-api-fallback';
import express from 'express';
import http from 'http';

// Set up express
const app = express();
const server = http.createServer(app);
const root = `${__dirname}`;

// History Fallback for express
app.use(express.static(root));
app.use(fallback('index.html', { root }));

// Listen
server.listen(8080, '0.0.0.0');

页面重新加载后出现Express + Webpack错误

1 个答案: