React路由配置后<Main/>组件全页面不渲染问题如何解决

你代码中的路径判断逻辑存在语法错误：

// 错误写法
let HideHeader = window.location.pathname === '/login' || '/register' ? null : <Main />

这里的|| '/register'并不会判断当前路径是否等于/register，而是会直接返回真值'/register'，导致整个三元表达式的判断条件永远为真，最终HideHeader始终为null，所以<Main/>在所有页面都不会渲染。

1. 修正判断条件 #

把判断逻辑调整为完整的等值判断即可：

// 修正后写法
const shouldHideMain = ['/login', '/register'].includes(window.location.pathname)
const HideHeader = shouldHideMain ? null : <Main />

也可以写成完整的多条件判断格式：

let HideHeader = (window.location.pathname === '/login' || window.location.pathname === '/register') ? null : <Main />

2. 可选优化（适配React Router特性） #

直接使用window.location.pathname在路由切换时可能不会触发组件重新渲染，建议用React Router提供的useLocation钩子获取路径，保证路由变化时能响应式更新组件：
首先引入对应钩子：

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useLocation
} from "react-router-dom";

调整组件内逻辑：

export default function MainApp() {
  const location = useLocation()
  const shouldHideMain = ['/login', '/register'].includes(location.pathname)

  return (
        <Router>
           {!shouldHideMain && <Main />}     
      <Switch>
      {/* 原有路由代码保持不变 */}
      </Switch>    
      </Router>
  )
}

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