react-router v4 add query parameter

Question

I'm using react-router v4 for a React app.

In a form, I want to add query parameters on the onSubmit action

My code looks like this:

class FiltroCuentasCorrientes extends Component {
 ...//Other stuff.

 onSubmit(e) {
   e.preventDefault();
   const { someVariable, otherVariable } = this.state;
   //Here I should add the variables to the query param.
 }

 render() {
  <Form onSubmit={(e) => this.onSubmit(e)}>
    ...
  </Form>
  }
}

I don't know what the recommended approach is.

Should I have a variable in local state like shouldAddParam and render a <Redirect /> with my params?

Or use the router context and the navigateTo method?

How can I do that?

Andre Pena · Accepted Answer · 2016-12-19 15:15:29Z

2

I would try to compose the action attribute of the form element during the render(), if that is possible. This way there's no need to prevent default.

However, if you want to "programatically redirect" using React router, then yes, you should use

this.context.router.push(path)

... as you can see in this example.

answered Dec 19, 2016 at 15:15

Andre Pena

59.7k53 gold badges213 silver badges257 bronze badges

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

Collectives™ on Stack Overflow

react-router v4 add query parameter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related