I'm designing a website with a form component that redirects to a "failure" or "success" component based on whether the form submits without an error or not. Here is the code I'm using:
await axios
.post('/api/patients/', data, axiosConfig)
.then((response) => {
history.push('/success');
})
.catch((error) => {
history.push('/failure');
});
This works well even when I intentionally make a bad request by turning my network off or changing the route. However, I can type in the "/success" route in my browser and access it whether or not I've submitted the form. How do I restrict this behavior?
I'm not sure if it is possible to track that the route was entered manually, but you can pass to the "success" component props like "submit: true", and render component if this props exist.
await axios
.post('/api/patients/', data, axiosConfig)
.then((response) => {
history.push({
pathname: '/success',
state: { submit: true }
});
})
.catch((error) => {
history.push({
pathname: '/failure',
state: { submit: true }
});
});
And in "success" component check props like:
if (props.location.state.submit) { . . . }