useLocation from 'react-router-dom' returns unexpected object

Note: I’m trying to switch to Plug’n’Play using yarn.

useLocation is imported from ‘react-router-dom’ package.

Previously (before pnp settings) the line below:

const location = useLocation()

always returned a location object with the next structure (e.g):

{pathname: '/', search: '', hash: '', state: null, key: 'default'}

With current yarn pnp settings, build renders app when on the first render, there is a location object with the structure as above, but when trying to change path, there is an object with the next structure (e.g.):

{action: 'PUSH', location: {pathname: '/new-path', search: '', hash: '', state: null, key: 'default'}}

Why is it so, and how to fix it (to always have a location object returned by useLocation hook of the same structure)?

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

Resolved.

The issue was that history package was upgraded to v.5.x. At the same time react-router is set to v.^5.2.1. So, the history v.5 is incompatible with react-router v.5.

Looks like history v.5.x is intended for coming react-router v.6.

Downgrading history to v.4 resolved the issue.

Note: the issue has nothing to do with switching to yarn Plug’n’Play.

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply