Thank you! Long-time extreme googler, first SO question. I have been wracking my brain for a solution to this issue, and have yet to find a solution.
I am trying to send form data from react to an express api via a fetch POST request. I have successfully used flux actions with a store and source to GET api data through fetch, and I have successfully stored POST requests on the express side; but whenever I submit the form and send the POST request, it looks like react-router is prepending the query to the hashHistory.
screencap of request handled by react-router
Here's a GITHUB GIST of front-end react and back-end express. And here's a tree of the application structure:
├── app
│ ├── controllers
│ │ └── projects.js
│ ├── helpers
│ │ ├── hash.js
│ │ └── passportHelper.js
│ ├── models
│ │ └── projects.js
│ ├── router.js
│ └── views
│ ├── error.hbs
│ ├── home.hbs
│ ├── layout.hbs
│ ├── login.hbs
│ └── register.hbs
├── app.js
└── src
├── app
│ ├── AppRoot.jsx
│ ├── actions
│ │ └── ProjectCreateActions.js
│ ├── alt.js
│ ├── components
│ │ └── CreateProject.jsx
│ ├── dispatcher
│ │ └── AppDispatcher.js
│ ├── sources
│ │ └── ProjectCreateSource.js
│ └── stores
│ └── ProjectCreateStore.js
└── client
├── css
├── fonts
└── js
I have tried a few different solutions, including AJAX and XMLHttpRequests, but with the same issue. I've tried finding ways to <Link> out of react-router, but can't seem to reach the express server. Not sure if it's related to how I'm setting the state, or if it's even sharing the state with the alt flux stores, or if that's how states even work or if I should be using props, but really I am just fumbling around documentation trying to get the POST request out of react and into express. Any tips would be GREATLY appreciated!
It looks like you need to prevent the default event from firing (form submission defaults to a GET request if not otherwise specified):
_onSubmit(e) {
e.preventDefault();
ProjectCreateStore.listen(this._onChange)
ProjectCreateActions.postProjects()
}