javascript - 修复生产 react 路由时，fetch 找不到 api url

Question

我有一个带有快速后端的 react 前端。 Express 仅提供生产中 react 端的静态构建文件。正如许多人遇到的那样，我在生产中遇到了 React 路由问题，所以我将其修复如下:

服务器.js:

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

app.get('/api/customers', (req, res) => {
  const customers = [
    {id: 2, firstName: 'Test', lastName: 'Case'},
    {id: 3, firstName: 'Foo', lastName: 'Bar'},
  ];

  res.json(customers);
});

“/*”解决了生产中的路由问题，但现在“/api/customers”的获取不再起作用。

客户.js:

  componentDidMount() {
    fetch('/api/customers')
      .then(res => res.json())
      .then(customers => this.setState({customers}, () => console.log('Customers fetched...', customers)))
      .catch(() => console.log('Error'));
  }

此获取请求在运行时记录“错误”。似乎 api 的 url 由于 server.js 中的“/*”更改而发生了某种变化，但我不确定应该如何更改 fetch 参数以使其工作。仅使用“/”即可进行提取:

服务器.js:

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

但是，这显然会阻止 react 路由在生产中工作。我需要将 fetch 参数更改为什么才能使其工作？

Answer 1

更改server.js中的路由顺序:

app.get('/api/customers', () => {});
app.get('/*', () => {});

特快路线为first come first served ，并且当“/api/customers”匹配“/*”时，如果您以相反的方式列出它们，它将返回您的index.html。