Breaking News: Grepper is joining You.com. Read the official announcement!

props.history.push with data

Add Answer

Adventurous Armadillo answered on November 18, 2020 Popularity 10/10 Helpfulness 9/10

answer props.history.push with data

related passing data in react router history,push

related this.props.history.location.push

related passing data in react router history,push

related this.props.history.location.push

props.history.push with data

Comment


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

Link to this answer
Share Copy Link

Contributed on Nov 24 2021

Adventurous Armadillo

0 Answers Avg Quality 2/10

Closely Related Answers

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

this.props.history.location.push

Comment

props.history.push({  pathname: '/register', state: data_you_need_to_pass});

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: levelup.gitconnected.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Nov 18 2020

Ill Ibex

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

Comment

this.props.location.state.detail

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

this.props.history.location.push

Comment

<Link to={{  pathname: "/register",  state: data_you_need_to_pass }}> Register</Link>

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: levelup.gitconnected.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Nov 18 2020

Ill Ibex

0 Answers Avg Quality 2/10

props.history.push with data

Contents

More Related Answers

props.history.push with data

Closely Related Answers

passing data in react router history,push

this.props.history.location.push

passing data in react router history,push

passing data in react router history,push

this.props.history.location.push

Grepper

Documentation

Social

Legal

Contact

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