Estoy tratando de enrutar programáticamente usando this.props.history.push(..) pero parece que no funciona.
Aquí está el enrutador:
import { BrowserRouter as Router, Route } from 'react-router-dom'; <Router> <Route path="/customers/" exact component={CustomersList} /> <Route path="/customers/:id" exact component="{Customer} /> </Router>En CustomerList, se representa una lista de clientes. Al hacer clic en un cliente (li) debe hacer que la aplicación se dirija a Cliente:
import { withRouter } from 'react-router' class Customers extends Component { static propTypes = { history: PropTypes.object.isRequired } handleCustomerClick(customer) { this.props.history.push(`/customers/${customer.id}`); } render() { return( <ul> { this.props.customers.map((c) => <li onClick={() => this.handleCustomerClick(c)} key={c.id}> {c.name} </li> </ul> ) } } //connect to redux to get customers CustomersList = withRouter(CustomersList); export default CustomersList;El código es parcial pero ilustra perfectamente la situación. Lo que sucede es que la barra de direcciones del navegador cambia de acuerdo con history.push(..), pero la vista no se actualiza, el componente Customer no se representa y CustomersList todavía está allí. ¿Algunas ideas?
Así que llegué a esta pregunta esperando una respuesta, pero fue en vano. he utilizado
const { history } = this.props; history.push("/thePath")En el mismo proyecto y funcionó como se esperaba. Luego de más experimentación y algunas comparaciones y contrastes, me di cuenta de que este código no se ejecutará si se llama dentro del componente anidado . Por lo tanto, solo el componente de la página renderizada puede llamar a esta función para que funcione correctamente.
Encuentre Sandbox de trabajo aquí
Parece que las cosas han cambiado un poco en la última versión del enrutador de reacción. Ahora puede acceder al historial a través del contexto. this.context.history.push('/path')
Consulte también las respuestas a este problema de github: https://github.com/ReactTraining/react-router/issues/4059
Puede intentar cargar el componente secundario con el historial. para hacerlo, pase la 'historia' a través de accesorios. Algo como eso:
return ( <div> <Login history={this.props.history} /> <br/> <Register/> </div> )