A continuación se muestra el código de ListEmployeeComponent
import React, { Component } from 'react'; import EmployeeService from '../service/EmployeeService'; class ListEmployeeComponent extends Component { constructor(props){ super(props) this.state = { employees : [] } this.addEmployee = this.addEmployee.bind(this); } componentDidMount(){ EmployeeService.getEmployees().then((res) => { this.setState({ employees: res.data}); }); } addEmployee(){ this.props.history.push("/add-employee"); } .... .... export default ListEmployeeComponentY este es de código App.js
import React from 'react'; import logo from './logo.svg'; import './App.css'; import {BrowserRouter as Router} from 'react-router-dom'; import {Routes, Route} from 'react-router'; import ListEmployeeComponent from './Component/ListEmployeeComponent'; import HeaderComponent from './Component/HeaderComponent'; import FooterComponent from './Component/FooterComponent'; import CreateEmployeeComponent from './Component/CreateEmployeeComponent'; function App() { return ( <div> <Router> <HeaderComponent/> <div className="container"> <Routes> <Route exact path="/" element={<ListEmployeeComponent/>}/> <Route path="/employees" element={<ListEmployeeComponent/>}/> <Route path="/add-employee" element={<CreateEmployeeComponent/>}/> </Routes> </div> <FooterComponent/> </Router> </div> ); } export default App;Quiero navegar mi página a la página de agregar empleados, pero cuando hago clic en ese botón aparece un error como "No se pueden leer las propiedades de undefined (leyendo 'push')"
¿Puede alguien por favor ayudarme con esto?
Esto se debe a que el historial no está definido cuando llamas a this.props.history.push(); . Debe pasar esa propiedad a su componente ListEmployeeComponent . También podría transformar ese componente en un componente funcional como su componente <App /> para que pueda utilizar un enlace llamado useNavigate de react-router-dom . A continuación se muestra un fragmento que muestra cómo podemos utilizar useNavigate para que no tengamos que pasar accesorios al árbol de componentes. Nuevamente, deberá convertir su componente ListEmployeeComponent en un componente funcional para que esto funcione: '
import { useNavigate } from 'react-router-dom'; export default function LinkButton({ children }: LinkButtonProps) { const navigate = useNavigate(); function handleNavigate() { navigate('/dashboard'); } return ( <LinkButtonComponent onClick={handleNavigate}> {children} </LinkButtonComponent> ); }importar { useHistory } desde "react-router-dom";
let historia = useHistory();
En reaccionar hay un enlace useHistory que se puede usar así en lugar de this.props.push. Esto resolverá tu problema.
Tenga en cuenta que obtiene el valor del historial de los accesorios, pero al definir el componente en el programa, no agregó ninguna propiedad llamada historial al componente.
function App() { ... return ( ... <Route exact path="/" element={<ListEmployeeComponent histoy={}/>}/> ... ) }