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

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

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

En primer lugar, no necesita hacer var r = this;esto enif statement refiere al contexto de la devolución de llamada en sí, que como está utilizando la función de flecha se refiere al contexto del componente Reaccionar.

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
• action - (string) La acción actual (PUSH, REPLACE o POP)

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

  • ruta - (cadena) La ruta de la URL
  • buscar - (cadena) La cadena de consulta de URL
  • hash - (cadena) El fragmento de hash de URL
  • state: estado específico de la ubicación (cadena) que se proporcionó, por ejemplo, a push (ruta, estado) cuando esta ubicación se introdujo en la pila. Solo disponible en el navegador y el historial de memoria.
• push (ruta, [estado]) - (función) Inserta una nueva entrada en la pila de historial
• replace (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 por n entradas
• goBack () - (función) Equivalente a ir (-1)
• goForward () - (función) Equivalente a ir (1)
• bloque (indicador) - (función) Evita la navegación

Entonces, mientras navegas, puedes pasar accesorios al objeto de historia como

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

o de manera 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 la /templateruta, puede acceder a los accesorios pasados ​​como

this.props.location.state.detail

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

Según los documentos:

withRouter

Puede obtener acceso a las propiedades del objeto de historial y 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 }.

puedes usar,

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

entonces puede acceder a los datos analizados desde el /templatecomponente siguiendo el código,

const state = this.props.location.state

Leer más sobre React Session History Management

• Para las versiones anteriores :

  history.push('/path', yourData);

  Y obtenga los datos en el componente relacionado al igual que 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 forma:

  history.push({
    pathname: '/path',
    customNameData: yourData,
  });

  Y obtenga los datos en el componente relacionado al igual que a continuación:

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

Sugerencia : el statenombre de la clave se usó en las versiones anteriores y para las versiones más nuevas, puede usar su nombre personalizado para pasar datos y usar el statenombre no es esencial.

Extender 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",

     ...
}

Pasando parámetros con historial de empuje:

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

};

Si necesita pasar parámetros de URL

hay una gran explicación de publicación de Tyler McGinnis en su sitio, Enlace a la publicación

Aquí hay ejemplos de código:

1. en el componente history.push:

   this.props.history.push(`/home:${this.state.userID}`)

2. en el componente del enrutador define la ruta:

   <Route path='/home:myKey' component={Home} />

3. en el componente de inicio:

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

No es necesario usar con Router. Esto funciona para mi:

En tu página principal,

<BrowserRouter>
   <Switch>
        <Route path="/routeA" render={(props)=> (
          <ComponentA {...props} propDummy={50} />
        )} />

        <Route path="/routeB" render={(props)=> (
          <ComponentB {...props} propWhatever={100} />
          )} /> 
      </Switch>
</BrowserRouter>

Luego, en Componente A o Componente B puede acceder

this.props.history

objeto, incluido el método this.props.history.push.

Para usar React 16.8+ (con ganchos) puede usar de esta manera

import React from 'react';
import { useHistory } from 'react-router-dom';

export default function SomeFunctionalComponent() {
let history = useHistory(); // should be called inside react component

const handleClickButton = () => {    
"funcionAPICALL"
       .then(response => {
             if (response.status >= 200 && response.status < 300) {
                 history.push('/template');
              });
}

return ( <div> Some component stuff 
    <p>To make API POST request and redirect to "/template" click a button API CALL</p>
    <button onClick={handleClickButton}>API CALL<button>
</div>)
} 

Fuente aquí para leer más https://reacttraining.com/react-router/web/example/auth-workflow

Agregue información para obtener parámetros de consulta.

const queryParams = new URLSearchParams(this.props.location.search);
console.log('assuming query param is id', queryParams.get('id');

Para obtener más información sobre URLSearchParams, consulte este enlace URLSearchParams