反應路由器-無法從網址獲取參數

Question

我有一個通往組件HandlingIndex的路線：

<Route strict path={handlingCasePath} component={HandlingIndex} />

HandlingIndex用trackRouteParam組件包裝。 trackRouteParam組件如下所示：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { parseQueryString } from '../../utils/urlUtils';

const defaultConfig = {
  paramName: '',
  parse: a => a,
  paramPropType: PropTypes.any,
  storeParam: () => undefined,
  getParamFromStore: () => undefined,
  isQueryParam: false,
  paramsAreEqual: (paramFromUrl, paramFromStore) => paramFromUrl === paramFromStore
};

/**
 * trackRouteParam
 *
 * Higher order component that tracks a route parameter and stores in the application
 * state whenever it changes.
 * @param config
 */
const trackRouteParam = config => (WrappedComponent) => {
  class RouteParamTrackerImpl extends Component {
    constructor() {
      super();
      this.updateParam = this.updateParam.bind(this);
    }

    componentDidMount() {
      this.updateParam();
    }

    componentDidUpdate(prevProps) {
      this.updateParam(prevProps.paramFromUrl);
    }

    componentWillUnmount() {
      const { storeParam } = this.props;
      storeParam(undefined);
    }

    updateParam(prevParamFromUrl) {
      const { paramFromUrl, storeParam, paramsAreEqual } = this.props;
      if (!paramsAreEqual(paramFromUrl, prevParamFromUrl)) {
        storeParam(paramFromUrl);
      }
    }

    render() {
      const {
        paramFromUrl,
        paramFromStore,
        storeParam,
        paramsAreEqual,
        ...otherProps
      } = this.props;
      return <WrappedComponent {...otherProps} />;
    }
  }

  const trackingConfig = { ...defaultConfig, ...config };

  RouteParamTrackerImpl.propTypes = {
    paramFromUrl: trackingConfig.paramPropType,
    paramFromStore: trackingConfig.paramPropType,
    storeParam: PropTypes.func.isRequired,
    paramsAreEqual: PropTypes.func.isRequired
  };

  RouteParamTrackerImpl.defaultProps = {
    paramFromUrl: undefined,
    paramFromStore: undefined
  };

  const mapStateToProps = state => ({ paramFromStore: trackingConfig.getParamFromStore(state) });
  const mapDispatchToProps = dispatch => bindActionCreators({ storeParam: trackingConfig.storeParam }, dispatch);
  const mapMatchToParam = (match, location) => {
    const params = trackingConfig.isQueryParam ? parseQueryString(location.search) : match.params;
    return trackingConfig.parse(params[trackingConfig.paramName]);
  };
  const mergeProps = (stateProps, dispatchProps, ownProps) => ({
    ...ownProps,
    ...stateProps,
    ...dispatchProps,
    paramFromUrl: mapMatchToParam(ownProps.match, ownProps.location),
    paramsAreEqual: trackingConfig.paramsAreEqual
  });

  const RouteParamTracker = withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(RouteParamTrackerImpl));

  RouteParamTracker.WrappedComponent = WrappedComponent;
  Object.keys(RouteParamTracker).forEach((ownPropKey) => {
    RouteParamTracker[ownPropKey] = WrappedComponent[ownPropKey];
  });

  return RouteParamTracker;
};

export default trackRouteParam;

在組件HandlingIndex ，我試圖從URL中獲取一個param caseNumber 。 僅顯示組件中的相關部分：

const mapStateToProps = state => ({
  selectedCaseNumber: getSelectedCaseNumber(state)
});

export default trackRouteParam({
  paramName: 'caseNumber',
  parse: caseNumberFromUrl => Number.parseInt(caseNumberFromUrl , 10),
  paramPropType: PropTypes.number,
  storeParam: setSelectedCaseNumber,
  getParamFromStore: getSelectedCaseNumber
})(connect(mapStateToProps)(requireProps(['selectedCaseNumber'])(HandlingIndex)));

setSelectedCaseNumber操作創建者是：

export const setSelectedCaseNumber= caseNumber=> ({
  type: SET_SELECTED_CASE_NUMBER,
  data: caseNumber
});

因此，當我轉到路線'case/1234' ，其中參數為caseNumber: 1234 ，在其中設置了selectedCaseNumber我看到data字段為NaN 。 在檢查控制台時，我可以在函數中看到我：

const mapMatchToParam = (match, location) => {
    const params = trackingConfig.isQueryParam ? parseQueryString(location.search) : match.params;
    return trackingConfig.parse(params[trackingConfig.paramName]);
  };

我可以看到match.params是一個空對象。 我不確定為什么會這樣，為什么我會得到一個空對象？

Answer 1

在trackRouteParam HOC中，在行：

const RouteParamTracker = withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(RouteParamTrackerImpl));

您嘗試編輯：

const RouteParamTracker = connect(mapStateToProps, mapDispatchToProps, mergeProps)(withRouter(RouteParamTrackerImpl));

希望可以幫到您！