No restricted globals

Question

I am using React and Redux to develop a webapp and when I started up my project I got this:

Line 13:  Unexpected use of \'location\'  no-restricted-globals

Sear         


        

Answer 1

Try adding window before location (i.e. window.location).

Answer 2

This is a simple and maybe not the best solution, but it works.

On the line above the line you get your error, paste this:

// eslint-disable-next-line no-restricted-globals

Answer 3

For me I had issues with history and location... As the accepted answer using window before history and location (i.e) window.history and window.location solved mine

Answer 4

Perhaps you could try passing location into the component as a prop. Below I use ...otherProps. This is the spread operator, and is valid but unneccessary if you passed in your props explicitly it's just there as a place holder for demonstration purposes. Also, research destructuring to understand where ({ location }) came from.

import React from 'react';
import withRouter from 'react-router-dom';

const MyComponent = ({ location, ...otherProps }) => (whatever you want to render)


export withRouter(MyComponent);

Answer 5

Use react-router-dom library.

From there, import useLocation hook if you're using functional components:

import { useLocation } from 'react-router-dom';

Then append it to a variable:

Const location = useLocation();

You can then use it normally:

location.pathname

P.S: the returned location object has five properties only:

{ hash: "", key: "", pathname: "/" search: "", state: undefined__, }

Answer 6

/* eslint no-restricted-globals:0 */

is another alternate approach