当试图直接访问它们时,React网站w /表示不在生产中加载路由,在dev中工作正常
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了当试图直接访问它们时,React网站w /表示不在生产中加载路由,在dev中工作正常相关的知识,希望对你有一定的参考价值。
所以基本上我只是决定将我的网站上传到服务器,虽然搞乱了我决定尝试访问其中一条路线'/ singup',这引发了以下错误:如果你试图通过主要路线访问它'/'网站运行正常。如果我从我的电脑运行它,该网站也可以在localhost上正常工作。
我在dreamhost静态Web服务器上托管应用程序。
有谁知道如何解决这个问题?
下面是我的快递server.js
,webpack
,index.js
和index.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中工作正常的主要内容,如果未能解决你的问题,请参考以下文章