Estoy usando el siguiente código de navegación simple
<Router> <Switch> <Route exact path='/dashboard' component={Dashboard} /> <Route path='/dashboard/accounts' component={AccountPage} /> </Switch> </Router> <NavLink exact to={'/dashboard'} disabled={this.props.item.disabled} activeClassName='active'> <NavLink exact to={'/dashboard/accounts'} disabled={this.props.item.disabled} activeClassName='active'>La URL cambia pero la vista no. Sin embargo, cambia cuando actualizo la página o voy manualmente a esa URL.
También puede utilizar el:
import { withRouter } from 'react-router-dom';Y luego, en su valor predeterminado de exportación, haga lo siguiente:
export default withRouter(connect(mapStateToProps, {})(Layout));Porque cuando tiene una conexión de exportación, debe indicar que ese componente utilizará el enrutador.
Esto se debe a que el método de connect react-redux implementa shouldComponentUpdate , lo que hará que el componente no se reproduzca cuando los accesorios no cambiaron. Y esto está en conflicto ahora con el enrutador de reacción 4.
Para evitarlo, puede pasar {pure: false} para connect como se describe en la sección de resolución de problemas de react-redux .
Otra forma es usar withRouter HOC o pasar la propiedad de location como se describe en DOCS .
Tenía mis Navlinks en un componente sin estado (o componente tonto) y un contenedor para controlar el estado de colapso de mi barra de navegación.
después de cambiar el contenedor de la barra de navegación de PureComponent a Component , me resolvió el problema.