我正在使用React和Redux开发一个web应用程序,当我开始我的项目时,我得到了这个:
Line 13: Unexpected use of 'location' no-restricted-globals
Search for the keywords to learn more about each error.
我搜索了很多关于如何解决这个问题的方法,但我找到的答案都对我没有帮助,所以我求助于Stack overflow。
有人知道如何修复这个错误吗?我很感激我能得到的所有帮助。
使用react-router-dom库。
如果你正在使用功能组件,从那里导入useLocation钩子:
import {useLocation} from 'react-router-dom';
然后将它附加到一个变量:
Const location = useLocation();
然后你可以正常使用它:
location.pathname
附注:返回的location对象只有五个属性:
{散列:“关键:“”,路径名:“/”搜索:“”,状态:undefined__,}
这是eslint的问题。同样发生在我使用的名称在输入值没有定义名称状态变量。
Eslint有一个限制词列表,我们不能使用。我很好奇,发现了这个eslint-restricted-globals npm包
浏览器中的一些全局变量很可能被人们使用
不打算将它们用作全局变量,如状态、名称等。
因为eslint认为它们是有效的全局变量,所以确实如此
没有警告,以防出现bug。
var restrictedGlobals = require("eslint-restricted-globals");
console.log("restricted ", restrictedGlobals);
这是eslint限制词列表
0 : "addEventListener" 1 : "blur" 2 : "close" 3 : "closed" 4 :
"confirm" 5 : "defaultStatus" 6 : "event" 7 : "external" 8 :
"defaultstatus" 9 : "find" 10 : "focus" 11 : "frameElement" 12 :
"frames" 13 : "history" 14 : "innerHeight" 15 : "innerWidth" 16 :
"length" 17 : "location" 18 : "locationbar" 19 : "menubar" 20 :
"moveBy" 21 : "moveTo" 22 : "name" 23 : "onblur" 24 : "onerror" 25
: "onfocus" 26 : "onload" 27 : "onresize" 28 : "onunload" 29 :
"open" 30 : "opener" 31 : "opera" 32 : "outerHeight" 33 :
"outerWidth" 34 : "pageXOffset" 35 : "pageYOffset" 36 : "parent" 37
: "print" 38 : "removeEventListener" 39 : "resizeBy" 40 :
"resizeTo" 41 : "screen" 42 : "screenLeft" 43 : "screenTop" 44 :
"screenX" 45 : "screenY" 46 : "scroll" 47 : "scrollbars" 48 :
"scrollBy" 49 : "scrollTo" 50 : "scrollX" 51 : "scrollY" 52 :
"self" 53 : "status" 54 : "statusbar" 55 : "stop" 56 : "toolbar"
57 : "top"
由于您正在使用react,我假设您正在使用检索路由器导航的useLocation()函数。
在这种情况下,将它分配给一个位置变量是很常见的,方法如下:
const location = useLocation();
然后,我打赌你会用它来检索location。pathname。
因为eslint将location作为window的一个元素进行检测。它将抛出no-restricted-globals错误编译。
为了修复这个问题,只需重命名变量如下:
const loc = useLocation();
查看下面描述它用法的tsx/jsx代码。
const loc = useLocation();
return (
<div className="App">
<div className="app-container">
{loc.pathname !== '/login' && <Menu></Menu>}
<div className="mid-container">
<BodyContainer />
</div>
</div>
</div>
);
另一方面,如果你正在使用window (location.pathname)的location属性,只需将window添加到它(window.location.pathname)就可以解决问题,就像接受的答案中解释的那样。