从 Node.JS 服务器重定向到路由不会呈现下一页

IT技术 node.js reactjs redirect
2021-05-22 12:02:35

嗨,我有一个react组件,它呈现这样的表单:

<form onSubmit={this.onSubmit}>
  <!-- a bunch of inputs here -->
</form>

该函数onSubmit()/results使用 axios发出 post 请求

handleSubmit(e) {
    var self = this;
    e.preventDefault();
    const {value1, value 2, ....} = this.state;
    axios.post('/results', {
        key1 : value1,
        key2 : value2,
        etc.
    }).then(function(response) {
      if (errors) {
          self.setState({errors: response.data.errorMessage});
      } 
    }).catch(function(error){
      console.log(error);
    });
  }

我有一个用于 post 请求的路由处理程序,server.js它将表单中的数据插入到数据库中。如果有错误,那么它会将该数据发送回客户端,否则它应该重定向到结果页面。处理程序如下所示:

app.post('/results', function(req, res, next) {
  const reportExists = Report.findOne({
    attributes: ['caseId'],
    where: {caseId : req.body.caseId},
  }).then(report => {
    if (report) {
      console.log("report already exists");
      res.status(200).send({errorMessage : "Report has been submitted for this case id"});
    } else {
      const report = Report.create(
        {
          // data from form
        }
      ).then(() => {
        console.log('Record inserted successfully');
        var caseId = req.body.caseId;
        res.redirect("/results/" + caseId);
        next();
      })
      .catch(err => {
        console.log('failed to insert record');
        res.status(200).send({errorMessage: "Failed to insert record"});
      });
    }
  });
});

我有另一个app.get('/results/:caseId')处理程序,它应该为结果页面呈现适当的路由。但是当成功插入记录时,它不会重定向到该页面,而是与表单保持在同一页面上。我的问题是,我应该从客户端还是服务器重定向到该页面?

1个回答

通过客户端 Javascript 提交 Ajax 调用只会从服务器返回响应,无论它是什么。浏览器不会自动处理重定向,它只是对 javascript 的 ajax 响应。由您的客户端 Javascript 决定如何处理重定向响应。

你有几个选择。您可以在客户端 Javascript 中检测重定向响应,然后设置window.location新位置并手动告诉浏览器转到新页面。或者,您可以让浏览器提交表单而不是您的客户端 Javascript,然后浏览器将自动遵循重定向响应。


此外,您不应该在调用next()之后调用res.redirect()发送响应后,不应启用其他路由处理程序来执行。