Question

关于使用React-Router的快速问题。我无法让我的服务器处理pushState（如果这是正确的术语）。最初，我使用的是一个名为connect-history-api-fallback的模块，它是一个中间件，使我只能在我的dist目录中提供静态文件。访问客户www.example.com显然有效，我可以浏览整个网站，另外，在www.example.com/about等任何路线刷新 - 也可以。

但是，我最近在我的Express服务器上添加了一个简单的API端点，以便React应用/客户端进行ping操作。现在的问题是，虽然我可以使初始页面加载工作（因此/api/news调用工作，从远程服务获取数据），但我不能再对任何其他路由进行刷新。例如，现在转到www.example.com/about将导致对/ about的GET请求失败。我该如何解决这个问题？真的很感激帮助！ PS - 不确定它是否重要，但我考虑在以后实施服务器端渲染。

import express from 'express';
import historyApiFallback from 'connect-history-api-fallback';
import config from '../config';
import chalk from 'chalk';
import fetch from 'node-fetch';
import path from 'path';

const app = express();

// FIXME: Unsure whether or not this can be used.
// app.use(historyApiFallback({
//   verbose : true
// }));

//// DEVELOPMENT MODE ONLY - USING EXPRESS + HMR ////
/* Enable webpack middleware for hot module reloading */
if (config.get('globals').__DEV__) {
  const webpack       = require('webpack');
  const webpackConfig = require('../build/webpack/development_hot');
  const compiler      = webpack(webpackConfig);

  app.use(require('./middleware/webpack-dev')({
    compiler,
    publicPath : webpackConfig.output.publicPath
  }));

  app.use(require('./middleware/webpack-hmr')({ compiler }));
}

//// PRODUCTION MODE ONLY - EXPRESS SERVER /////
if (config.get('globals').__PROD__) {
  app.use(express.static(__dirname + '/dist'));
}

//// API ENDPOINTS FOR ALL ENV ////
app.get('/api/news', function (req, res) {
  fetch('http://app-service:5000/news')
    .then( response => response.json() )
    .then( data => res.send(data) )
    .catch( () => res.sendStatus(404) );
});

// Wildcard route set up to capture other requests (currently getting undexpected token '<' error in console)
app.get('*', function (req, res) {
  res.sendFile(path.resolve(__dirname, '../dist', 'index.html'));
});

export default app;

Answer 1

Express通过实现一系列中间件来实现工作，这些中间件通过.use按顺序“插入”。很酷的是你的路线也只是middlware - 所以你可以将它们分开，在你的历史回退之前让它们，然后只有让它通过你的路线的请求（例如，不匹配任何路线）将会遇到后备。

尝试以下内容：

const app = express(); // ... var routes = exprss.Router(); routes.get('/api/news', function (req, res) { fetch('http://app-service:5000/news') .then( response => response.json() ) .then( data => res.send(data) ) .catch( () => res.sendStatus(404) ); }); app.use(routes); app.use(historyApiFallback({ verbose : true }));

React Router，pushState与Express Server

1 个答案: