First of all, you need not do var r = this;
as this in if statement
refers to the context of the callback itself which since you are using arrow function refers to the React component context.
According to the docs:
history objects typically have the following properties and methods:
So while navigating you can pass props to the history object like
this.props.history.push({
pathname: '/template',
search: '?query=abc',
state: { detail: response.data }
})
or similarly for the Link
component or the Redirect
component
<Link to={{
pathname: '/template',
search: '?query=abc',
state: { detail: response.data }
}}> My Link </Link>
and then in the component which is rendered with /template
route, you can access the props passed like
this.props.location.state.detail
Also keep in mind that, when using history or location objects from props you need to connect the component with withRouter
.
As per the Docs:
withRouter
You can get access to the history object’s properties and the closest
<Route>'s
match via the withRouter
higher-order component. withRouter
will re-render its component every time the route changes with the
same props as <Route>
render props: { match, location, history }
.
Route
should have access tothis.props.location
,this.props.history
, etc. I think you don't need to useref
anymore with v4. Try doingthis.props.history.push('/template');
– Saadprops
to the component that matches the route? I think this GitHub thread addresses your concern. – Saad