React router not working with Redux, not receiving props - reactjs

Question

I'm trying to connect react router v4 with redux but it's not working. I'm using withRouter as described in the docs, but props aren't available in my route components. Any idea?
Here's my code:
index.js
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { routerMiddleware } from 'react-router-redux';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
const logger = createLogger();
const middleware = [
thunk,
routerMiddleware(history)
];
if (process.env.NODE_ENV === 'development') {
middleware.push(logger);
}
// create store
const store = createStore(
reducers,
applyMiddleware(...middleware)
);
render(
<Provider store={store}>
<Router>
<App />
</Router>
</Provider>,
document.getElementById('root')
);
App.js
import React, { Component } from 'react';
import { Switch, Route, Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
class App extends Component {
componentDidMount() {
this.props.fetchPages(API_PAGES);
this.props.fetchPosts(API_POSTS);
}
render() {
return (
!this.props.pages.isFetching ?
<div>
<ul>
{this.props.pages.data && this.props.pages.data.map(page => (
<li key={page.id}>
<Link to={page.slug}>{page.title.rendered}</Link>
</li>
))}
</ul>
<Switch location={this.props.location}>
<Route path={routes.HOME} exact component={Home} />
<Route path={routes.ABOUT} component={About} />
<Route path={routes.CONTACT} component={Contact} />
<Route path={routes.NEWS} component={News} />
<Route component={NotFound} />
</Switch>
</div> :
<p>Loading...</p>
);
}
}
function mapStateToProps(state) {
return state;
}
export default withRouter(connect(
mapStateToProps,
{ ...actions }
)(App));
reducers/index.js
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
export default combineReducers({
pages,
posts,
routing: routerReducer
});
components/Home.js
import React from 'react';
const Home = (props) => {
console.log('home', props);
return (
<div>
This is the home page.
</div>
);
};
export default Home;

Answer 1

You should pass the props to home component like this to make it available there,
<Route path={routes.HOME} exact component={(props)=><Home {...props} newProps={value you want to pass}/> }/>

Answer 2

Since you are using react-router v4 you need to be using react-router-redux v5. See here
This uses a different npm package to react-router-redux installed with:
npm install --save react-router-redux#next
The routing reducer should then have the router key (not routing) in combineReducers.
You will then need to use ConnectedRouter and pass in your history object like so...
render(
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);