¿Cómo usar useNavigate() React-Router-Dom Hook en Class Component?
export default class MovieForm extends Form { state = { data : {}, error : {}, } onSubmit(){ // Navigate to Another Component } render(){ // rendering the Form UI } }Quiero navegar a otro componente al enviar el formulario.
La documentación oficial de React-Router-Dom dice que puedo usar el gancho 'useNavigate()' solo dentro de un componente funcional.
Tengo un Componente de clase y no puedo convertirlo en un Componente funcional. porque extiende la clase de formulario y quiero toda la funcionalidad de la clase de formulario en este componente MovieForm.
Entonces, ¿cómo puedo navegar a otro componente?
Desde React router v6, puede usar un componenteNavigate .
export default class MovieForm extends Form { state = { data : {}, error : {}, submitted : false, } onSubmit(){ // Navigate to Another Component this.setState({submitted: true}); } render(){ // rendering the Form UI {submitted && <Navigate to={// Router path to the target component} state={// you can pass state/props here} /> } } }Si desea utilizar el useNavigate , básicamente tiene dos opciones.
useNavigate .withRouter personalizado ya que react-router-dom@6 ya no exporta uno. No cubriré el caso de conversión. Aquí hay una implementación de HOC withRouter .
Ejemplo:
import { useNavigate, /* other hooks */ } from 'react-router-dom'; const withRouter = WrappedComponent => props => { const navigate = useNavigate(); // other hooks return ( <WrappedComponent {...props} {...{ navigate, /* other hooks */ }} /> ); }; export default withRouter; Ahora importa con el withRouter y decora el componente de clase para que la navigate y cualquier otro valor de enlace RRD se inyecte como accesorios.
... import withRouter from '../path/to/withRouter'; class MovieForm extends React.Component { // * state = { data : {}, error : {}, } onSubmit() { const { navigate } = this.props; // Navigate to Another Component navigate("...target path..."); } render() { // rendering the Form UI } } export default withRouter(MovieForm); * ¡Los componentes de React solo deben extender React.Component , no otras clases personalizadas de Javascript! Ver Composición vs Herencia