Property 'query' does not exist on type 'Location<unknown>

[b3hr4d]

My dependencies :

"connected-react-router": "^6.8.0",
"react": "^16.14.0",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.4",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"source-map-explorer": "^2.5.1",
"typescript": "^3.7.5",

I want to use query like this http://localhost:3000/course?grade=item1&genre_name=item2&instrument_name=item3 and want to get query parameter from connected-react-router like this :

const mapStateToProps = (state: AppState, ownProps: Props): CourseProps => {
  return {
     query : state.router.location.query,
  };
};

It works perfect :

router: {
  location: {
    pathname: '/course',
    search: '?grade=item1&genre_name=item2&instrument_name=item3',
    hash: '',
    key: '3dwbg7',
    query: {
      grade: 'item1',
      genre_name: 'item2',
      instrument_name: 'item3'
    }
  },
  action: 'PUSH'
}

Error : Property 'query' does not exist on type 'Location<unknown>'.ts(2339)

How can I add this on Location type and fix this error ?

[nicholeuf]

Looks like a release of latest master would resolve this https://github.com/supasate/connected-react-router/pull/410.

[Hmoulvad]

Please release master!

[robations]

I think that release was published in February.

I have 6.9.1 which says there should be a query object in the action payload (according to the TS defs), but it is coming through without. Not sure if I've missed something in the docs, but I might have to manually parse the "search" string instead:

{
    "type": "@@router/LOCATION_CHANGE",
    "payload": {
        "location": {
            "pathname": "/",
            "search": "?param=yourmom",
            "hash": ""
        },
        "action": "POP",
        "isFirstRendering": true
    }
}

  export interface LocationChangeAction<S = LocationState> {
    type: typeof LOCATION_CHANGE;
    payload: LocationChangePayload<S>;
  }

  export interface LocationChangePayload<S = LocationState> extends RouterState<S> {
    isFirstRendering: boolean;
  }

  export interface RouterState<S = LocationState> {
    location: RouterLocation<S>
    action: RouterActionType
  }

  export interface RouterLocation<S> extends Location<S> {
    query: Record<string, string> /// nope
  }

[fueher13]

The TS def for the LocationChangeAction is incorrect. From the looks of it, it only inject the query prop at the reducer level and doesn't create it in the action (which it should based on the TS def). I'm not sure if the intention was to only have the router state have query or both the action payload and router state have the query prop.

[robations]

Presumably this is an easy fix if we have a decision on what the correct resolution is. I suppose removing query from the action would be the simplest resolution. Omit<...> or similar.

@supasate are you the Lord High Decision-maker here, or can someone rock up with a PR?