React路由多路径匹配隐藏Header组件失效问题求助

你写的多路径判断逻辑存在语法错误：location.pathname === '/login' || '/signup' || '/signup/confirm' 中，|| 后面的字符串是独立的布尔表达式，非空字符串在JavaScript里会被判定为true，所以不管当前路径是什么，这个if条件永远成立，直接返回null，导致Header在整个应用中都被隐藏。

正确的写法有两种： #

方式一：完整的多条件相等判断

直接给每个路径都写完整的相等比较：

if (location.pathname === '/login' || location.pathname === '/signup' || location.pathname === '/signup/confirm') {
  return null
}

方式二：使用数组includes方法（更简洁）

把需要隐藏Header的路径存入数组，用includes方法判断当前路径是否在数组内，适合路径数量较多的场景：

const hiddenPaths = ['/login', '/signup', '/signup/confirm'];
if (hiddenPaths.includes(location.pathname)) {
  return null
}

修改后的完整代码示例： #

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()

  const hiddenPaths = ['/login', '/signup', '/signup/confirm'];
  if (hiddenPaths.includes(location.pathname)) {
    return null
  }

  return (
    <nav className="bg-gray-800 p">
        // nav content
    </nav >
  )
};

export default Header;

内容的提问来源于stack exchange，提问作者Ismail Yaman