En primer lugar, no necesita hacer var r = this; ya que esta if statement refiere al contexto de la devolución de llamada en sí misma que, dado que está utilizando la función de flecha, se refiere al contexto del componente React.

Según los documentos:

Los objetos de historial suelen tener las siguientes propiedades y métodos:

• longitud - (número) El número de entradas en la pila de historial
• acción - (cadena) La acción actual (PUSH, REPLACE o POP)

• ubicación - (objeto) La ubicación actual. Puede tener las siguientes propiedades:

  • pathname - (cadena) La ruta de la URL
  • search - (cadena) La cadena de consulta de URL
  • hash - (cadena) El fragmento hash de URL
  • estado - (cadena) estado específico de la ubicación que se proporcionó a, por ejemplo, empujar (ruta, estado) cuando esta ubicación se colocó en la pila. Solo disponible en el navegador y el historial de memoria.
• push(ruta, [estado]) - (función) Empuja una nueva entrada en la pila de historial
• replace(ruta, [estado]) - (función) Reemplaza la entrada actual en la pila de historial
• go(n) - (función) Mueve el puntero en la pila de historial por n entradas
• goBack() - (función) Equivalente a go(-1)
• goForward() - (función) Equivalente a go(1)
• block(prompt) - (función) Impide la navegación

Entonces, mientras navega, puede pasar accesorios al objeto de historial como

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

o de manera similar para el componente de Link o el componente de Redirect

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

y luego en el componente que se procesa con /template route, puede acceder a los accesorios pasados como

 this.props.location.state.detail

También tenga en cuenta que, al usar objetos de historial o ubicación de accesorios, debe conectar el componente con withRouter .

Según los documentos:

con enrutador

Puede obtener acceso a las propiedades del objeto de historial y la coincidencia <Route>'s más cercana a través del componente de orden superior withRouter . withRouter volverá a renderizar su componente cada vez que cambie la ruta con los mismos accesorios que <Route> render props: { match, location, history } .

Ampliación de la solución (sugerida por Shubham Khatri) para su uso con ganchos React (16.8 en adelante):

 package.json (always worth updating to latest packages) { ... "react": "^16.12.0", "react-router-dom": "^5.1.2", ... }

Pasando parámetros con push histórico:

 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;

Accediendo al parámetro pasado usando useLocation desde '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]); };

1. Para las versiones anteriores :

    history.push('/[pathToSomeWhere]', yourData);

   Y obtenga los datos en el componente relacionado como se muestra a continuación:

    this.props.location.state // it is equal to yourData

2. Para las versiones más nuevas , la forma anterior funciona bien , pero hay una nueva forma:

    history.push({ pathname: '/[pathToSomeWhere]', state: yourData, });

   Y obtenga los datos en el componente relacionado como se muestra a continuación:

   • Componente de clase

      this.props.location.state; // it is equal to yourData

   • Componente de función

      const location = useLocation(); location.state; // it is equal to yourData

En algún momento será necesario usar el componente Link o NavLink en lugar de usar la función history.push . puedes usar como a continuación:

 <Link to={{ pathname: '/[pathToSomeWhere]', state: yourData }} > ... </Link>

Sugerencia : el nombre de la clave de state debe usarse en la última versión.