Tengo problemas para usar history.push("path/...") dentro de un componente de función. Mi problema es cuando trato de usar el parámetro de un componente de función en el controlador de botones. Tengo el siguiente código: Example.js
... import {useHistory} from 'react-router-dom'; ... //This function works fine, but i would prefer something reusable function Button() { const history = useHistory(); function handle(){ history.push("/path"); //The path is harcoded } return( <button onClick={handle}> Home //This text is harcoded </button> ); } //This is what i'm looking for, because i would write it once. function Button(path, text) { const history = useHistory(); function handle(){ history.push(path); //This doesn't work } return( <button onClick={handle}> {text} //This throws an error "no valid react child" </button> ); } //this component is being render as a child of BrowserRouter class Example extends Component{ render(){ return( <div> <Button path="path/..."/> </div> ); } } export ...Este es mi código real, solo eliminé las líneas repetidas. Con el primer componente de función no tengo problemas, pero necesito crear un nuevo componente de función para cada botón. En cambio, estoy buscando una forma de escribir estas funciones una vez y usarlas para crear muchos botones.
La segunda función no hace nada cuando la ruta se pasa a través de accesorios, y si agrego console.log(path) en handle() , el valor de la ruta se imprime a medida que pasa correctamente, pero history.push(path) no tómalo.
Quiero agregar que, la única pista que tengo son los documentos del método push, donde los tipos que toma este método son string , pero se pasa any .
Los componentes de React reciben solo un único argumento que es el objeto props. Estás asumiendo dos.
function Button(path, text) { const history = useHistory(); function handle(){ history.push(path); // This doesn't work } return( <button onClick={handle}> {text} // This throws an error "no valid react child" </button> ); }debiera ser
function Button({ path, text }) { const history = useHistory(); function handle(){ history.push(path); // This should work now } return( <button onClick={handle}> {text} // This should render now </button> ); } Observe aquí que los accesorios pasados se desestructuran del objeto props .
Envíe la ruta y el nombre como accesorios y utilícelos dentro de la función de su botón.
<Button path="path/..."/ name="Home"> function Button({path,name}) { const history = useHistory(); function handle(){ history.push(path); } return( <button onClick={handle}> {name} </button> ); }