I've encountered an issue while attempting to submit a basic form within a React component:
class UploadPartList extends Component {
constructor(props) {
super(props);
this.state = { data: [] };
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
console.log('Submit button clicked');
$.ajax({
type: "POST",
url: "/partListUpload",
success: function(){
console.log("Successfully posted");
},
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>
);
}
}
The configuration in my routes.js file is as follows:
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;
In my Express server, the routes are defined as shown below:
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);
});
However, upon form submission, I encounter a 404 error. It appears that React is looking for the route specified by React Router rather than the one I've set up on the backend.
I have searched through various StackOverflow threads but haven't found a solution that resolves this issue. How can I reach a specific route on the backend?