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?

I tried your code using create-react-app, it works fine. Are you using create-react-app or webpack-dev-server? — Parth, Nov 03 '17 at 05:51
This is the other code that should have been included in the question/problem: export default connect( mapStateToProps, )(App) — preston, Nov 03 '17 at 08:06
Yours worked probably because it was plain old React and not React with Redux ...that's my guess... — preston, Nov 03 '17 at 08:07

score 15 · Accepted Answer · answered Nov 03 '17 at 06:55

15

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

answered Nov 03 '17 at 06:55

preston

2,211
5
20
46

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. – IAteYourKitten Oct 11 '18 at 15:27

Dane · Answer 2 · 2017-11-03T05:51:28.673

6

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:

The component is connected to redux via connect()(Comp).

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:

either replace render with component, or
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

edited Nov 03 '17 at 05:51

answered Nov 03 '17 at 05:14

Dane

7,361
4
30
48

2

I think, you should read documentation about react-router-dom: https://reacttraining.com/react-router/web/example/basic – Slawa Eremin Nov 03 '17 at 05:16
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.... – preston Nov 03 '17 at 08:03
No no... that site contains all the official docs related to React Router, no need to enroll in any course. Goto https://reacttraining.com/react-router/ – Dane Nov 03 '17 at 08:05

score 4 · Answer 3 · answered Sep 06 '19 at 12:40

4

In my case, this is working properly. If you will import router and link both together.

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

answered Sep 06 '19 at 12:40

Sagarika Pillay

51
2

score 2 · Answer 4 · answered Aug 29 '19 at 15:14

2

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";

answered Aug 29 '19 at 15:14

Ankit Kumar Rajpoot

3,495
23
22

React Router or Link Not Rendered

4 Answers4

Linked