¿Cómo enviar parámetros en uso? ¿Historia de React Router Dom?

Solución:

Así es como puedes pasar

history.push("/home", { update: true });

y acceda así si es un componente sin estado.

props.location.state.update;

si es un componente basado en la clase.

this.props.location.update;

El segundo parámetro en el history.push() El método se conoce como estado de ubicación,

history.push(path, [state])

Dependiendo de sus requisitos, es posible que desee aprobar update como parte del estado de la ubicación o la cadena de consulta.

history.push({
  pathname: '/home',
  search: '?update=true',  // query string
  state: {  // location state
    update: true, 
  },
}); 

Como se indica en la documentación de React-Router, puede acceder al estado accediendo al location accesorios. En su caso, para obtener el valor de update,

En los componentes de la clase, suponiendo que esté conectado al enrutador,

this.props.location

Para los componentes funcionales, puede utilizar el gancho useLocation para acceder al objeto de ubicación.

import { useLocation } from 'react-router-dom';
.
.
const location = useLocation();

console.log(location.state.update)  // for location state
console.log(location.search)  // for query strings;

Si está utilizando React Hooks, siga este método porque this.props solo está disponible en React Class.

Componente uno:

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

const ComponentOne = () => {
    const history = useHistory();
    const handleSubmit = () => {
        history.push('/component-two',{params:'Hello World'})
    }
    return (
        <div>
            <button onClick={() => {handleSubmit()}}>Fire</button>
        </div>
    )
}

Componente dos:

import React from 'react'
import { useLocation } from "react-router-dom";

const ComponentTwo = () => {
    const location = useLocation();
    const myparam = location.state.params;
    return (
        <div>
            <p>{myparam}</p>
        </div>
    )
}

---

---

Utiliza Nuestro Buscador