Node/Express 和 API 中的 BrowserHistory

Question

我正在尝试为使用 react-router 的 React 应用程序实现 BrowserHistory。基于 the documentation，我的 index.js:

let express = require('express');
let harp = require('harp');
let path = require('path');

let app = express();

app.use(express.static(__dirname + "/dist"));
app.use(harp.mount(__dirname + "/dist"));

// BrowserHistory code
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});

let port = process.env.PORT || 3333;
app.listen(port, () => console.log("Listening on port " + port) );

// ...
// Various app.get(...) endpoints below
// ...

但是，这现在捕获所有 API 请求（例如，我想向 /metric 发出 GET 请求）并返回 index.html 而不是正确的 JSON数据。

如何实现 BrowserHistory 并拥有 API 个端点？

Answer 1

您需要在 app.get(...) 之后为端点定义 app.get('*', ...)。

如果您看一下 docs about "middleware"，您会发现 Express 应用程序看起来像一个分层蛋糕，每一层都负责一些事情。每个请求传递抛出所有层。 Layer可以执行一些代码，修改req，res也可以调用next()层。

app.get('*', ...) 处理所有请求，不会调用 next() for，所以如果你在其他中间件之前定义它，它们将不会被执行。

Node/Express 和 API 中的 BrowserHistory

BrowserHistory in Node/Express with API

node.js

express

react-router

browser-history