React Router Redux - Component never renders

Question

I'm trying to get the latest react-router-redux (v5) working, but it never renders my component. The only one that gets rendered is home (/). Breakpoints in my other routes components never get hit. I've even removed the connect(mapStateToProps, mapDispatchToProp)(Component) call (and just did a very simple component) - still nothing is rendered.

The route in my browser bar changes. If I just import Projects in index.js, get rid of all the routing and nav, it renders fine.

I've nearly exactly copy pasted from the documentation at

https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux

Unless there is some incompatibility I'm not aware of?

The code

packages.json

"react": "15.5.4",
"react-dom": "15.5.4",
"history": "^4.6.3",
"isomorphic-fetch": "^2.2.1",
"prop-types": "^15.5.10",
"react-redux": "^5.0.6",
"react-router": "^4.1.2",
"react-router-redux": "^5.0.0-alpha.6",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",

/index.js

import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'

import React from 'react'
import { render } from 'react-dom'

import { createStore, applyMiddleware, combineReducers} from 'redux'
import { Provider } from 'react-redux'

import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';


let routes = require('./routes').routes;
import reducers from './reducers'

const history = createHistory();
const routerMiddle = routerMiddleware(history);

const store = createStore(
    combineReducers({
        ...reducers,
        router: routerReducer
    },
    applyMiddleware(
        routerMiddle,
        thunkMiddleware,
        createLogger()
    ))
)

render(
        <Provider store={store}>
                <ConnectedRouter history={history} >
                  {routes}
                </ConnectedRouter>  
                {/* <Projects /> <-- This works if I comment out ConnectedRouter */}
        </Provider>
        ,
        document.getElementById('react-app')
    );

/routes.js

import * as React from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { Projects } from './components/Projects';

export const routes = <Layout>
    <Route exact path='/' component={ Home } />
    <Route path='projects' component={ Projects } />
</Layout>;

/components/Projects.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Projects extends Component {
  render() {
    //debugger;
    return (
      <div>Woe is me</div>
    )
  }
}

export default Projects;

Also, I can see that actions are being dispatched for route changes:

Edit:

So that too much time doesn't go by and I forget what the solution was:

MAKE SURE YOUR VERSION OF REACT ROUTER AND THE VERSION OF THE DOCUMENTATION YOU STUMBLED UPON ARE CORRECT.

I was reading an outdated docs site, using nearly the latest react / react router.

This might be related: github.com/ReactTraining/react-router/blob/master/packages/… — Gilad Artzi
I don't think this is a blocking issue. The only problem I notice is this line: <Route path='projects' component={ Projects } />. It should be <Route path='/projects' component={ Projects } />. — Win

Badis Merabet Badis Merabet · Accepted Answer · 2017-08-19T10:02:56

I think I had similar issue when I upgraded to react-router v4 and I have solved it by using withRouter in my root component.

export default (
  <Router history={history} onUpdate={logPageView}>
      <Root>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/calculator" component={Calc} />
            <Route path="/how-it-works" component={HowItWorks} />
            <Route path="/get-landed" component={GetLanded} />
            <Route status={404} path="*" component={Home} />
          </Switch>
      </Root>
    </Router>
);

If you don't have a root component try on all components of your routes.

import { withRouter } from 'react-router'
class Root extends React.Component {
  ...
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
export default const RootWithRouter = withRouter(Root)

Here few other links that i get inspired from:

React Router Redux - Component never renders

1 Answers