Question

我有一个快速后端的反应前端。 express只为生产中的反应方提供静态构建文件。我在生产中遇到了React路由工作的问题，正如许多人所做的那样，所以我修复了它：

server.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);
});

＆＃39; / *＆＃39;解决生产中的路由问题，但现在获取＆＃39; / api / customers＆＃39;不起作用了。

customer.js：

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

此获取请求记录“错误”＆＃39;跑的时候。似乎api的url因为＆＃39; / *＆＃39;而在某种程度上发生了变化。更改server.js，但我不知道如何更改fetch参数以使其工作。 fetch只使用＆＃39; /＆＃39;：

server.js：

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

然而，这显然会阻止生产中的反应路由。我需要更改我的fetch参数才能使其工作？

Answer 1

更改server.js中的路线顺序：

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

快递中的路线为first come first served，以及＆＃34; / api / customers＆＃34;匹配＆＃34; / *＆＃34;，如果你的列表反过来，它将返回你的index.html。

Answer 2

非常感谢您提供@David Filipidisz的解决方案！订单确实会影响路线。这是我的工作代码

server.js

... ipmorts here ...

app.use('/users', require('./users/users.controller'));
app.use('/machineLearning', require('./machineLearning/machineLearning.controller'));
app.use('/public', require('./public/public.controller'));

//for Prod
app.use(express.static(path.join(__dirname,'../L10-ui/dist')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, '../L10-ui/dist', 'index.html'));
});```

在为生产修复react-routing时，fetch无法找到api url

2 个答案: