reactjs - How to pass parameters with history.push in react-router v4? -

how can pass parameter this.props.history.push('/page') in react-router v4?

.then(response => {        var r = this;         if (response.status >= 200 && response.status < 300) {              r.props.history.push('/template');           }); 

first of all, need not var r = this; in if statement refers context of callback since using arrow function refers react component context.

according docs:

history objects typically have following properties , methods:

• length - (number) number of entries in history stack
• action - (string) current action (push, replace, or pop)

• location - (object) current location. may have following properties:

  • pathname - (string) path of url
  • search - (string) url query string
  • hash - (string) url hash fragment
  • state - (string) location-specific state provided e.g. push(path, state) when location pushed onto stack. available in browser , memory history.
• push(path, [state]) - (function) pushes new entry onto history stack
• replace(path, [state]) - (function) replaces current entry on history stack
• go(n) - (function) moves pointer in history stack n entries
• goback() - (function) equivalent go(-1)
• goforward() - (function) equivalent go(1)
• block(prompt) - (function) prevents navigation

so while navigating can pass pass props history object like

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

and in component rendered /template route, can access props passed like

this.props.location.state.detail 

also keep in mind that, when using history or location objects props need connect component withrouter.

as per docs:

withrouter

you can access history object’s properties , closest <route>'s match via withrouter higher-order component. withrouter re-render component every time route changes same props <route> render props: { match, location, history }.