没有受限制的全局变量答案

【问题标题】：No restricted globals没有受限制的全局变量
【发布时间】：2017-12-12 23:37:33
【问题描述】：

我正在使用 React 和 Redux 开发一个 webapp，当我开始我的项目时，我得到了这个：

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

Search for the keywords to learn more about each error.

我搜索了很多关于如何解决它的问题，但我找到的答案都没有帮助我，所以我求助于堆栈溢出。

有谁知道如何解决这个错误？我很感激我能得到的所有帮助。

【问题讨论】：

标签： javascript reactjs react-router eslint

【解决方案1】：

尝试在location 之前添加window（即window.location）。

【讨论】：

这应该是公认的答案。 ESLint 正确地让您知道您正在编写弱代码。其他两个答案，包括接受的答案，并没有解决问题，只是禁止 ESLint 告诉你。
确实，解决这个问题的正确方法是在 location 前面加上 window.location。出于某种原因，CRA 团队目前认为location 是一个“令人困惑的浏览器全局”。我想说，如果您使用的是 CRA 并且不知道位置对象，那么您就处于无人区。也许他们只是想让阅读网址烦人，这是可以理解的......
我创建了一个 github 问题，专门询问 location 对象是否真的是一个令人困惑的浏览器全局，因此需要在任何地方使用 window. 前缀... github.com/facebook/create-react-app/issues/7733

【解决方案2】：

这是一个简单的，也许不是最好的解决方案，但它确实有效。

在出现错误的行上方，粘贴以下内容：

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

【讨论】：

在将服务工作人员内联为 blob 时，适用于 create-react-app 项目的良好解决方案。赞成。
这并不能解决问题，只是隐藏了警告。

【解决方案3】：

使用react-router-dom 库。

如果您正在使用功能组件，请从那里导入 useLocation 钩子：

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

然后将其附加到一个变量中：

Const location = useLocation();

然后就可以正常使用了：

location.pathname

P.S：返回的location 对象只有五个属性：

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

【讨论】：

【解决方案4】：

也许您可以尝试将位置作为道具传递给组件。下面我使用 ...otherProps。这是扩展运算符，如果您明确传递道具，它是有效的但不必要的，它只是作为演示目的的占位符。此外，研究解构以了解 ({ location }) 的来源。

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

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


export withRouter(MyComponent);

【讨论】：

【解决方案5】：

只需像这样解构位置：({location})。

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review

【解决方案6】：

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

是另一种替代方法

【讨论】：