React Router oder Link funktioniert nicht

Question

Ich benutze react-router-dom in einer Redux-App.

Das ist mein Ersteinrichtung in index.js:

ReactDOM.render(

    <Provider store={store}> 
    <BrowserRouter> 
     <App /> 
    </BrowserRouter> 
    </Provider> 

    , document.getElementById('root')); 

Da ist in meinem App.js ich habe:

render() { 
    return (
     <div className="App"> 
     <Route exact path="/" render={() => { 
      return (
       <div> 
       { 
        this.props.categories.map((category)=>{ 
        console.log('category', category) 
        return (
          <Link key={category.name} to="/category" >{category.name}</Link> 
        ) 
        }) 
       } 
       </div> 
     ) 

      }} 
     /> 

     <Route path="/category" render={() => { 
      console.log('category path this.props', this.props) 
      return (<p>Category is whatever</p>) 
     }} 
     /> 

     </div> 
    ); 
    } 

Ich würde denken, dass, wenn ich auf einen der Links klicken angezeigte Der Browser würde automatisch wissen, wie der neue Routenpfad/die neue Kategorie gerendert wird, aber aus irgendeinem Grund nicht.

Was mache ich falsch?

Answer 1

Der obige Beitrag von Dane hat die Lösung. Aber im Geiste, die Lösung mit mehr Klarheit zu präsentieren, werde ich die relevanten Codes kopieren und einfügen, die den reaktiven Router gut mit redux und anderer Middleware arbeiten ließen.

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



export default withRouter(connect(
    mapStateToProps, 
)(App)) 

Answer 2

Von Reagieren Router docs,

Im Allgemeinen reagieren Router und Redux zusammen gut funktionieren. Gelegentlich kann eine App jedoch eine Komponente enthalten, die nicht aktualisiert, wenn sich der Standort ändert (untergeordnete Routen oder aktive Navigationslinks werden nicht aktualisiert). Dies geschieht, wenn:

1. die Komponente redux über connect() (Comp) verbunden ist.
2. Die Komponente ist nicht eine „Route-Komponente“, es Bedeutung ist wie so nicht gemacht: <Route component={SomeConnectedThing}/>

Das Problem ist, dass Redux shouldComponentUpdate implementiert und es gibt keine Anzeichen dafür, dass etwas, wenn sie sich geändert hat empfängt keine Requisiten von den Router. Dies ist einfach zu beheben. Finden Sie, wo Sie Ihre Komponente verbinden und wickeln Sie es in withRouter.

Also vielleicht ist es ein Problem mit der Verwendung von render Requisiten. Also:

1. entweder ersetzen render mit component oder
2. versuchen, ihre Lösung, mit withRouter (auch dort müssen Sie sie in Komponenten machen)

https://reacttraining.com/react-router/core/guides/redux-integration/blocked-updates