reactjs - React 路由器不与 Redux 一起工作，不接收道具

Question

我正在尝试将 react router v4 与 redux 连接，但它不起作用。我withRouter按照文档中的描述使用，但我的路由组件中没有道具。任何想法？

这是我的代码：

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

应用程序.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));

减速器/index.js

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

export default combineReducers({
  pages,
  posts,
  routing: routerReducer
});

组件/Home.js

import React from 'react';

const Home = (props) => {
  console.log('home', props);

  return (
    <div>
      This is the home page.
    </div>
  );
};

export default Home;

标签： reactjsreduxreact-routerjsx

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}/> }/>