Quiero redirigir programáticamente al usuario a una página de carga mientras espero una respuesta de la API del servidor. Estoy tratando de hacer esto dentro de un componente de clase.
El código que tengo se parece más o menos a esto:
class App extends Component { constructor(props){ super(props); } handleSubmit = () => { useNavigate("/loading") } } render() { return ( <div> <button onClick={this.handleSubmit}> Upload! </button> </div> ); } } export default App;La cosa es que no pasa nada cuando hago clic en "¡Cargar!" botón. He leído que useNavigate no se puede usar dentro de un componente de clase, pero no estoy seguro de cómo podría implementar esto de manera diferente.
Supongo que mi pregunta es, ¿cómo puedo usar useNavigate dentro de un componente de clase?
EDITAR: Gracias por sus respuestas. Finalmente decidí convertir mi código en una función siguiendo estos pasos: https://nimblewebdeveloper.com/blog/convert-react-class-to-function-component
Ahora funciona a las mil maravillas.
Su aclaración es correcta, useNavigate() es un gancho y, por lo tanto, solo se puede usar en un componente funcional. Estoy pensando que, como alternativa, puede envolver su App con withRouter , un HOC que le da al componente de envoltorio acceso a los objetos de match , location e history . Desde allí, puede actualizar la ubicación con history.push('/loading') .
Consulte aquí para obtener más información sobre la history .
No puede usar useNavigate que es un gancho de reacción dentro del componente de clase.
por cierto, puede usar react-router-dom que proporciona una forma diferente de manipular la URL del navegador.
Crear un componente funcional como Wrapper
import { useNavigate } from 'react-router-dom'; export const withRouter = (ClassComponent) => { const RouterWrapper = (props) => { const navigate = useNavigate(); return ( <ClassComponent navigate={navigate} {...props} /> ); }; return RouterWrapper; }; Luego, en su App.js , expórtelo envolviéndolo con el componente funcional
import { withRouter } from './wrapper'; class App extends Component { constructor(props){ super(props); } handleSubmit = () => { useNavigate("/loading") } render() { return ( <div> <button onClick={this.handleSubmit}> Upload! </button> </div> ); } } export default withRouter(App);