React router - не получает параметр из URL

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 я пытаюсь получить param caseNumber из URL.Просто показывая соответствующие части здесь из компонента:

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

Надежда может помочь вам!