React Router or Link Not working

问题:

I am using react-router-dom in a redux app.

This is my initial setup in index.js:

ReactDOM.render(

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

  , document.getElementById('root'));

Then in my App.js I have:

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>
    );
  }

I would think that whenever I click any of the Links displayed the browser would automatically know how to render the the new Route path /category but for some reason it does not.

What am I doing wrong?

回答1:

The above post by Dane has the solution. But in the spirit of presenting the solution with more clarity, I will copy and paste the relevant codes that made react router work well with redux and other middleware.

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



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

回答2:

From React Router docs,

Generally, React Router and Redux work just fine together. Occasionally though, an app can have a component that doesn’t update when the location changes (child routes or active nav links don’t update). This happens if:

1. The component is connected to redux via connect()(Comp).
2. The component is not a “route component”, meaning it is not rendered like so: <Route component={SomeConnectedThing}/>

The problem is that Redux implements shouldComponentUpdate and there’s no indication that anything has changed if it isn’t receiving props from the router. This is straightforward to fix. Find where you connect your component and wrap it in withRouter.

So maybe it's a problem with using render props. So:

1. either replace render with component, or
2. try their solution, with withRouter ( even there you have to make them into components )

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