当试图直接访问它们时,React网站w /表示不在生产中加载路由,在dev中工作正常

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了当试图直接访问它们时,React网站w /表示不在生产中加载路由,在dev中工作正常相关的知识,希望对你有一定的参考价值。

所以基本上我只是决定将我的网站上传到服务器,虽然搞乱了我决定尝试访问其中一条路线'/ singup',这引发了以下错误:404 error如果你试图通过主要路线访问它'/'网站运行正常。如果我从我的电脑运行它,该网站也可以在localhost上正常工作。

我在dreamhost静态Web服务器上托管应用程序。

有谁知道如何解决这个问题?

下面是我的快递server.jswebpackindex.jsindex.html配置,我也使用react router 4和webpack 3.5.5。

如果您需要更多信息,请告诉我们!

server.js

const bodyParser = require('body-parser');
const express = require('express');
const historyApiFallback = require('connect-history-api-fallback');
const mongoose = require('mongoose');
const path = require('path');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const cors = require('cors');
const fallback = require('express-history-api-fallback')

const config = require('../config/config');
const webpackConfig = require('../webpack.config');

const isDev = process.env.NODE_ENV !== 'production';
const port = process.env.PORT || 8080;


// Configuration
// ================================================================================================

// Set up Mongoose
mongoose.connect(isDev ? config.db_dev : config.db, {
  useMongoClient: true
});
mongoose.Promise = global.Promise;

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
// app.use(fallback(path.resolve(__dirname, './dist/index.html')));

// API routes
app.use(cors());


if (isDev) {
  const compiler = webpack(webpackConfig);

  app.use(historyApiFallback({
    verbose: false
  }));

  app.use(webpackDevMiddleware(compiler, {
    publicPath: webpackConfig.output.publicPath,
    contentBase: path.resolve(__dirname, '../client/public'),
    stats: {
      colors: true,
      hash: false,
      timings: true,
      chunks: false,
      chunkModules: false,
      modules: false
    }
  }));

  app.use(webpackHotMiddleware(compiler));
  app.use(express.static(path.resolve(__dirname, '../dist')));
} else {
  app.use(historyApiFallback({
    verbose: true
  }));
  app.use(express.static(path.resolve(__dirname, '../dist')));
  // app.use(fallback(path.resolve(__dirname, './dist/index.html')));
  app.get('*', function (req, res) {
    res.sendFile(path.resolve(__dirname, '../dist/index.html'));
    res.end();
  });
}

app.listen(port, '0.0.0.0', (err) => {
  if (err) {
    console.log(err);
  }

  console.info('>>> 
答案

您需要将所有流量重定向到您的应用,以便让它处理路由。

静态的 :

例如,在S3上,您将错误文档定义为index.html

服务器:

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

以上是关于当试图直接访问它们时,React网站w /表示不在生产中加载路由,在dev中工作正常的主要内容,如果未能解决你的问题,请参考以下文章

React 图像在本地加载,但不在 AWS Amplify 上

在React中处理用户验证的重定向?

不在 App.js 中时反应传单地图位置故障

React本机init方法不在IOS中构建应用程序

仅当通过另一个文件提供链接时如何显示按钮(React)

在 React 中的组件之间共享数据