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?

Allbee

I tried your code using create-react-app, it works fine. Are you using create-react-app or webpack-dev-server? – Brodsky

create-react-app I'm using Redux – Allbee

This is the other code that should have been included in the question/problem: export default connect( mapStateToProps, )(App) – Allbee

Yours worked probably because it was plain old React and not React with Redux ...that's my guess... – Allbee

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

Allbee

I guess, when your App component uses redux (and an AppContainer), and it's outside of the Router component, then this is required. Works for me. – Stasny

Answer 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

Diaphanous

I think, you should read documentation about react-router-dom: reacttraining.com/react-router/web/example/basic – Bungle

The link you have provided is awesome. However, it seems to be hard to navigate to find the other goodies. I went to reacttraining.com and there seems to be no link that leads to react raining.com/react-router and the pages that are even deeper than that. Do you need to be signed up with the course to see the table of contents for those? I'd like to explore that site more.... – Allbee

No no... that site contains all the official docs related to React Router, no need to enroll in any course. Goto reacttraining.com/react-router – Diaphanous

Answer 3

Both Link and Router is compulsory.

Not Work!

import { BrowserRouter as Link } from "react-router-dom";

Work in my case.

import { BrowserRouter as Router, Link } from "react-router-dom";

Waits