Por ejemplo, hay una etiqueta de entrada y un botón de envío en un componente de inicio. En la etiqueta de entrada, escribo mi nombre y hago clic en enviar la ruta de mi cambio de URL a / info y en esa URL quiero mostrar el nombre que escribí en el campo de entrada.
puede hacerlo con la ayuda de useHistory y useLocation Hooks de react-router-dom. simplemente inicialice sus componentes en BrowserRouter Switch e importe useHistory Hook en el componente desde donde desea pasar el estado e importe useLocation en el componente donde desea recibir el estado actualizado desde el botón de envío.
<Switch> <Route exact path="/form" component={Form} /> <Route exact path="/data" component={Formdata} /> </Switch>inserte la ruta y el estado en el objeto de useHistory de la misma manera para obtener datos de useHistory y cree el objeto de useLocation.
import { useState } from "react"; import { useHistory } from "react-router-dom"; const Form = () => { const [initstate, setInitState] = useState(""); let history = useHistory(); const HandleSubmit = (e) => { e.preventDefault(); history.push("/data", initstate); }; return ( <> <form onSubmit={HandleSubmit}> <input type="text" placeholder="text field" onChange={(e) => setInitState(e.target.value)} /> <input type="submit" value="Submit" /> </form> </> ); }; export default Form;para obtener datos de estado:
import { useLocation } from "react-router-dom"; const Formdata = () => { let location = useLocation(); console.log(location.state); return ( <> <p>{location.state}</p> </> ); }; export default Formdata;