React JS: Call action on form and redirect to specified page

Question

I have a React component with a form that has an action like so:

<center>
    <Form
        action={`/api/sets/`}
        method="post"
        onSubmit={this.onSubmit}>

        <Button color="primary" type="submit">
            Finish
        </Button>
    </Form>
</center >

The onSubmit function looks like this:

onSubmit = (e) => {
    e.preventDefault()
    window.location = "/workout-history";
    e.target.submit()
}

The action to /api/sets/ happens after clicking the button and the onSubmit function does get called but the page isn't redirected. In the post to /api/sets I am returning status 204 so that shouldn't determine where it goes. I am guessing it's possible the function gets called first then the action gets called. Any ideas on how to call the forms action and redirect the page elsewhere?

if you want to form does the action why do you have e.preventDefault() — Amir-Mousavi
– Amir-Mousavi, Commented Jan 21, 2019 at 13:59

Maxime Pomier · Accepted Answer · 2019-01-21 13:54:58Z

2

You can use import react-router-dom for redirecting.

import { Redirect } from 'react-router-dom'


onSubmit = () => {
      return <Redirect to='/target' />
  }

you can view more in : https://medium.com/@anneeb/redirecting-in-react-4de5e517354a

answered Jan 21, 2019 at 13:54

Maxime Pomier

888 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Slaknation Over a year ago

That's still not working. It's doing the exact same thing. The function gets called but the page doesn't redirect. I'm not sure why.

Maxime Pomier Over a year ago

Can you try change your button finish ? with : <input type="submit" value="Submit" />

Ganapati V S · Accepted Answer · 2019-01-21 14:53:46Z

0

The answer you are looking for is probably this.

Prefer using withRouter HOC and call history.push('/new-location') in onSubmit function.

answered Jan 21, 2019 at 14:53

Ganapati V S

1,6811 gold badge13 silver badges23 bronze badges

Collectives™ on Stack Overflow

React JS: Call action on form and redirect to specified page

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related