Tenía un botón en un componente de clase de reacción de la siguiente manera
<Link to="display"> <button onClick={this.nextBtn} className="nextBtn"> Submit </button> </Link> Al hacer clic en el botón, necesito enrutarlo a otro componente llamado <Display /> usando la función nextBtn = () => {} .
Vi que en el componente de función puede ser por useHistory pero en el componente de clase, no sé cómo hacerlo.
También puede usar withRouter desde import { withRouter } from "react-router"; e inyectar su componente. Puede obtener el history como accesorios y usar history.push() para navegar por la ruta.
Ejemplo:
import React from "react"; import { withRouter } from "react-router"; class ShowTheLocation extends React.Component { nextBtn = () => { const { history } = this.props; history.push("/display"); }; render() { return ( <Link to="display"> <button onClick={this.nextBtn} className="nextBtn"> Submit </button> </Link> ); } } export default withRouter(ShowTheLocation);También puedes probar esto. funciona para mi
import { browserHistory } from 'react-router'; class MyClass extends Component { nextBtn = () => { browserHistory.push('/display'); } }Puede enrutar a otra página usando varios métodos. Primero, en su caso, está utilizando un enlace. Pero el paso del nombre de la ruta es incorrecto. Tienes que pasar el nombre de la ruta al frente así:
<Link to={'/display'}> // display should be a routes name <button className="nextBtn"> Submit </button> </Link>https://reactrouter.com/web/api/Link .
Puedes leer más sobre esto aquí:
Segundo método:
Use el paquete react-router-dom para definir el enrutamiento y luego use una de las formas mencionadas a continuación en el evento onClick del botón.
1. this.props.history.push("componentpath"). 2. browserHistory object (in react-router package).También verifique las soluciones de esta pregunta ... ¿cómo navegar de una página a otra en reaccionar js?