react js usehistory push and pass props

Clear Copperhead answered on September 14, 2021 Popularity 8/10 Helpfulness 10/10

answer react js usehistory push and pass props

react js usehistory push and pass props

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;


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 8/10 Helpfulness 10/10 Language javascript

Source: stackoverflow.com

Tags: javascript push

Link to this answer
Share Copy Link

Contributed on Sep 14 2021

Clear Copperhead

0 Answers Avg Quality 2/10

react js usehistory push and pass props

Contents

More Related Answers

react js usehistory push and pass props

Grepper

Documentation

Social

Legal

Contact

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