Why do I get 'Unexpected use of 'location' no-restricted-globals'?

Because eslint detected location is an element of window. So, try renaming your props:

const {
  children,
  myLocation: { pathname },
} = this.props;

let path = myLocation.pathname;

Reference:

• https://www.xul.fr/javascript/window-location.php
• https://eslint.org/docs/rules/no-restricted-globals

In most/all web browsers, location.reload(), for example, is an alias for its fully-qualified name window.location.reload().

You can test it in your browser by opening the dev tools pane console and typing in:

location.reload()

and

window.location.reload()

Both will trigger the page to refresh.

The ES Lint warning is effectively warning you that your code is relying on this alias, so it is plausible that in the future, the code could break suddenly, maybe if the alias became deprecated or some part of your tool chain operated in a manner that required usage of window.

In JavaScript, weird things can happen due to variable-shadowing and closure. It is possible that a location reference could be declared after and then such a reference to something like location.reload() would break with a message such as "no such method reload". This would be less likely to occur if you called the fully-qualified name window.location.reload().

You should try this code

const {
  children,
  location: { pathname },
} = this.props;

let path = pathname;

Your location variable hasn't been defined in this block code so eslint thinks you use global variable