Question

我想在React组件中提交一个简单的表单：

class UploadPartList extends Component {

  constructor(props) {
    super(props);
    this.state = { data: [] };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    console.log('Clicking submit');
    $.ajax({
      type: "POST",
      url: "/partListUpload",
      success: function(){
        console.log("Post success");
      },
      error: function(xhr, status, error) {
        console.log(error);
      }
    })
  }

  render() {
      return (
        <div>

          <form id="csvForm" action='' onSubmit={this.handleSubmit} method='post' encType="multipart/form-data">
            <p>upload your part number list (.xls or .csv)</p>
            <input id="uploadCSV" type="file" name="csv_form" />
            <input type="submit" className="submitButton" />
          </form>

        </div>
      );
  }
}

我的routes.js文件是：

import React from 'react';
import { Router, Route } from 'react-router';

import App from './components/App';

const Routes = (props) => (
  <Router {...props}>
    <Route path="/" component={App} />
  </Router>
);

export default Routes;

服务器中的Express路由定义如下：

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});

app.use('/partListUpload', upload.single('csv_form'), partListUploadController);

app.post('/partListUpload', function(req, res) {
  res.send(req.body);
});

但是，当我尝试提交表单时，收到404错误。似乎React期望React Router定义的路由而不是我在服务器中定义的路由。

我已经查看过类似的StackOverflow问题，并且找不到有效的解决方案。如何点击我在后端定义的路线？

Answer 1

我的问题似乎是我的Express服务器实际上没有运行。我使用create react app包创建了这个应用程序。然后我跟着this guide用Express设置了它。但是，我继续尝试通过在CLI中运行 npm start 而不是 npm run build ，然后 node server / index.js <来让我的应用程序工作/ em>的。现在它有效。

使用React Router和Express的后端Ajax POST

1 个答案: