
import { useHistory } from "react-router-dom";

const FirstPage = props => {
    let history = useHistory();

    const someEventHandler = event => {
       history.push({
           pathname: '/secondpage',
           search: '?query=abc',
           state: { detail: 'some_value' }
       });
    };

};

export default FirstPage;
/*
Extending the solution (suggested by Shubham Khatri) for use with React hooks (16.8 onwards):

package.json (always worth updating to latest packages)

{
     ...

     "react": "^16.12.0",
     "react-router-dom": "^5.1.2",

     ...
}
*/
//Passing parameters with history push:

//Accessing the passed parameter using useLocation from 'react-router-dom':

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const SecondPage = props => {
    const location = useLocation();

    useEffect(() => {
       console.log(location.pathname); // result: '/secondpage'
       console.log(location.search); // result: '?query=abc'
       console.log(location.state.detail); // result: 'some_value'
    }, [location]);

};

Popularity 10/10 Helpfulness 9/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Nov 24 2021

Adventurous Armadillo

0 Answers Avg Quality 2/10

passing data in react router history,push

Comment

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

Popularity 10/10 Helpfulness 8/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Feb 05 2021

Mystic Dev

0 Answers Avg Quality 2/10

react router history push parameter

Comment

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

Popularity 10/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: history

Link to this answer
Share Copy Link

Contributed on Mar 17 2020

Dangerous Deer

0 Answers Avg Quality 2/10

passing data in react router history,push

Comment

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

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Feb 05 2021

Mystic Dev

0 Answers Avg Quality 2/10

passing data in react router history,push

Contents

More Related Answers

passing data in react router history,push

Closely Related Answers

props.history.push with data

passing data in react router history,push

react router history push parameter

passing data in react router history,push

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.