reactjs - El enrutador React 4 no actualiza la vista en el enlace, pero lo hace en la actualización

react router dom redirect

Question

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, sí cambia cuando actualizo la página o voy manualmente a esa URL.

Answer 1

Esto se debe a que el método de connect react-redux implementa shouldComponentUpdate que hará que el componente no se renderice cuando los props no cambian. Y esto está en conflicto ahora con reaccion-router 4.

Para evitarlo, puede pasar {pure: false} a la connect como se describe en la sección de resolución de problemas de react-redux .

Otra forma es usar el HOC de withRouter o aprobar la location como se describe en DOCS .

Answer 2

Me he encontrado con este problema. Lo resuelvo agregando la clave de atributo al componente Switch con valor es una ruta de ubicación y búsqueda de ubicación.

Answer 3

También puede utilizar el:

import { withRouter } from ''react-router-dom'';

Y luego en tu exportación predeterminada, te gusta esto:

export default withRouter(connect(mapStateToProps, {})(Layout));

Porque cuando tiene una conexión de exportación, debe indicar que ese componente usará el enrutador.

Answer 4

Tenía mis enlaces de navegación 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 PureComponent de PureComponent de PureComponent a Component me solucionó el problema.