当我在登录、注册或确认页面时，我想隐藏一个Header组件，但由于某种原因，只有当我只给出一个字符串来比较路径时，它才能正常工作。
下面是我的代码：
import { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import Status from './auth/Status';
const Header = () => {
const [menuIsOpen, setMenuIsOpen] = useState(false);
const location = useLocation()
if (location.pathname === '/login') { return null }
return (
<nav className="bg-gray-800 p">
// nav content
</nav >
)
};
export default Header;这在登录屏幕上工作正常。标题被隐藏，登录后，标题再次显示。
但是当我尝试这个的时候：
if (location.pathname === '/login' || '/signup' || '/signup/confirm') { return null }标头在整个应用程序中禁用。
我该如何解决这个问题？
2条答案
按热度按时间wh6knrhe1#
条件：
......解释为：
(See operator precedence）
...即，即使
location.pathname与'/login'不同，条件也是真的，因为字符串'/signup'是truthy。因此，您的标题始终处于禁用状态。
正确构建条件，例如使用
Array.prototype.includes：v9tzhpje2#
正确的条件是：