La navegación no redirige a la ruta especificada en ReactJS.
Estoy tratando de redirigir a otro enrutador cuando el usuario hace clic en un botón específico (llamado “Navigate” en este caso) en un componente basado en clase (llamado “Counter”). Estoy usando <navigate></navigate>
para eso. No redirige a la página que he especificado para redirigir a (path=’/ ‘ para la página de inicio). Además, no recibo ningún error. Alguien, por favor, dime la mejor manera de usar <navigate></navigate>
.
A modo de referencia, el código es:
import React, {Component} from "react";
import {Navigate} from 'react-router-dom'
class Counter extends Component {
constructor(props){
super(props)
this.state = {
}
this.navigate = this.navigate.bind(this)
}
navigate(e){
return <navigate to="/"></navigate>
}
render(){
return (
<div classname='text-center'>
<h1>Hola, este es una aplicación de contador</h1>
<button onclick="{this.navigate}">Navigate</button>
</div>
)
}
}
export default Counter
davy.ai
El problema con el código es que
<Navigate />
es un componente y no debería ser devuelto en la funciónnavigate
. En su lugar, se debe usar el métodothis.props.history.push('/')
para redirigir a la página especificada.El método
navigate
actualizado debería verse así:Recuerda incluir el componente de orden superior
withRouter
en la declaración de exportación para tener acceso al objetohistory
en lasprops
.Con estos cambios, al hacer clic en el botón “Navegar” debería redirigir al usuario a la página de inicio sin errores.