React Router with Redux:仅将必要的道具传递到子级路由

import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { Router, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { routerReducer, routerMiddleware } from 'react-router-redux';

// 创建Redux的reducer
const rootReducer = combineReducers({
  // 其他的reducer
  router: routerReducer
});

// 创建history对象
const history = createBrowserHistory();

// 创建router中间件
const middleware = routerMiddleware(history);

// 创建store
const store = createStore(
  rootReducer,
  applyMiddleware(middleware)
);

// 渲染根组件
ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App} />
    </Router>
  </Provider>,
  document.getElementById('root')
);

import { connect } from 'react-redux';

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        {/* 父级路由组件的内容 */}
        <ChildComponent prop1={this.props.prop1} prop2={this.props.prop2} />
      </div>
    );
  }
}

// 将需要传递的道具从Redux的store中映射到组件的属性上
const mapStateToProps = (state) => ({
  prop1: state.prop1,
  prop2: state.prop2
});

export default connect(mapStateToProps)(ParentComponent);

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        {/* 子级路由组件的内容 */}
        <p>{this.props.prop1}</p>
        <p>{this.props.prop2}</p>
      </div>
    );
  }
}

export default ChildComponent;