React routera 4 nie aktualizuje widok na linku, ale robi na odświeżeniu

Question

Używam następujący prosty kod nav

<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'> 

Zmiany URL, ale widok nie. Zmienia się to jednak po odświeżeniu strony lub ręcznym przejściu do tego adresu URL.

Answer 1

To dlatego react-reduxconnect sposób realizuje shouldComponentUpdate co spowoduje składnik nie renderowanie gdy podpory nie uległ zmianie. A to jest teraz w konflikcie z routerem reagującym 4.

Aby tego uniknąć, można przekazać {pure: false} do connect, jak opisano w react-redux troubleshooting section.

Innym sposobem jest użycie withRouter HOC lub podanie location podpory, jak described in DOCS.

Answer 2

Można również użyć:

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

A potem na domyślny eksportu, robisz tak:

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

Bo kiedy masz eksport połączyć, trzeba powiedzieć, że składnik będzie korzystał z routera.