React Router or Link Not Rendered

Question

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 new Route path /category but for some reason it does not.

What am I doing wrong?

Answer 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))