React router not working with Redux, not receiving props

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

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

Answer 2

您应该将道具传递给home组件，以使其在该处可用，

<Route path={routes.HOME} exact component={(props)=><Home {...props} newProps={value you want to pass}/> }/>