¿Cómo pasar parámetros con History.push/Link/Redirect en reaccionar-router v4?

¿Cómo podemos pasar parámetros this.props.history.push('/page')en React-Router v4?

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

May 23 '17 02:05 IshanGarg

En primer lugar, no es necesario que lo haga, var r = this;ya que esto se if statementrefiere al contexto de la devolución de llamada en sí, que, dado que está utilizando la función de flecha, se refiere al contexto del componente React.

Según los documentos:

Los objetos históricos suelen tener las siguientes propiedades y métodos:

longitud - (número) El número de entradas en la pila del historial

action - (cadena) La acción actual (PUSH, REPLACE o POP)

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

nombre de ruta - (cadena) La ruta de la URL

buscar - (cadena) La cadena de consulta de URL

hash - (cadena) El fragmento de hash de la URL

estado: (cadena) estado específico de la ubicación que se proporcionó, por ejemplo, para empujar (ruta, estado) cuando esta ubicación se insertó en la pila. Sólo disponible en el navegador y el historial de memoria.

push(ruta, [estado]) - (función) Empuja una nueva entrada a la pila del historial

reemplazar(ruta, [estado]) - (función) Reemplaza la entrada actual en la pila del historial

go(n) - (función) Mueve el puntero en la pila del historial en n entradas

goBack() - (función) Equivalente a go(-1)

goForward() - (función) Equivalente a go(1)

bloquear(mensaje) - (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 similar para el Linkcomponente o el Redirectcomponente

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

y luego, en el componente que se representa con /templateruta, puede acceder a los accesorios pasados como

this.props.location.state.detail

También tenga en cuenta que, cuando utilice objetos de historial o ubicación de accesorios, deberá conectar el componente con withRouter.

Según los documentos:

con enrutador

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

Jul 23 '2017 08:07 Shubham Khatri

Ampliación de la solución (sugerida por Shubham Khatri) para usar 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",

     ...
}

Pasar parámetros con historial push:

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]);

};

Feb 17 '2020 05:02 akhouri

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
```

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

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 utilizar Linkun NavLinkcomponente en lugar de utilizar history.pushuna función. puedes usar como a continuación:

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

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

Mar 23 '2020 08:03 AmerllicA

puedes usar,

this.props.history.push("/template", { ...response }) o this.props.history.push("/template", { response: response })

luego puede acceder a los datos analizados desde /templateel componente mediante el siguiente código,

const state = this.props.location.state

Leer más sobre la gestión del historial de sesiones de React

May 12 '2019 07:05 Tenusha Guruge

Si necesita pasar parámetros de URL

Hay una excelente explicación de la publicación de Tyler McGinnis en su sitio, enlace a la publicación.

aquí hay ejemplos de código:

en el componente History.push:

this.props.history.push(`/home:${this.state.userID}`)
en el componente del enrutador usted define la ruta:

<Route path='/home:myKey' component={Home} />
en el componente Inicio:

componentDidMount(){
    const { myKey } = this.props.match.params
    console.log(myKey )
}

Nov 08 '2018 13:11 shyke