Sometimes, we want to pass parameters with history.push, Link, or Redirect in React Router v4.

In this article, we’ll look at how to pass parameters with history.push, Link, or Redirect in React Router v4.

How to pass parameters with history.push, Link, or Redirect in React Router v4?

To pass parameters with history.push, Link, or Redirect in React Router v4, we can set the state property.

For instance, we write

this.props.history.push({
  pathname: '/template',
  search: '?query=abc',
  state: {
    detail: response.data
  }
})

to call history.push with an object with the state property to pass props to the history object.

With the Link, component, we write

<Link
  to={{
    pathname: "/template",
    search: "?query=abc",
    state: { detail: response.data },
  }}
>
  My Link
</Link>

to set the to prop to an object with the state property containing the data that we want to pass into the route component as props.

Conclusion

To pass parameters with history.push, Link, or Redirect in React Router v4, we can set the state property.