web-dev-qa-db-de.com

Der Reakt-Router 4 aktualisiert die Ansicht bei Verknüpfung nicht, führt jedoch eine Aktualisierung durch

Ich verwende den folgenden einfachen nav-Code

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

Die URL ändert sich, die Ansicht jedoch nicht. Es ändert sich jedoch, wenn ich die Seite aktualisiere oder manuell zu dieser URL gehe.

reactjsurlreact-routerreact-router-v4
29
ilyo

Sie können auch Folgendes verwenden:

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

Und dann machen Sie bei Ihrem Export-Standard Folgendes:

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

Denn wenn Sie eine Exportverbindung haben, müssen Sie wissen, dass diese Komponente den Router verwendet.

37
daminufe

Dies liegt daran, dass die react-reduxconnect-Methode shouldComponentUpdate implementiert, wodurch die Komponente not gerendert wird, wenn sich die Requisiten nicht geändert haben. Und dies steht jetzt im Konflikt mit dem reakt-Router 4.

Um dies zu vermeiden, können Sie {pure: false} an connect übergeben, wie in Abschnitt zur Fehlerbehebung bei react-redux beschrieben.

Eine andere Möglichkeit besteht darin, withRouter HOC zu verwenden oder location prop wie beschrieben in DOCS zu übergeben.

26
Tomasz Mularczyk

Ich hatte meine Navlinks in einer Stateless-Komponente (oder stummen Komponente) und einem Container, um den Zusammenbruchstatus meiner Navbar zu steuern. 

nachdem ich den Navbar-Container von PureComponent auf Component umgestellt hatte, wurde das Problem für mich gelöst.

5
Tom Schinelli

Ich bin auf dieses Problem gestoßen. Ich löse es durch Hinzufügen eines Attributschlüssels zur Komponente. Switch with value ist ein Standortpfadname und eine Standortsuche.

0
TDQ