Search code examples
reactjsreact-routerreact-router-domyarnpkgwindow.location

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


Solution

  • 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.