React Router导航栏条件渲染失效：登录后及/auth路由需隐藏导航栏

问题描述 #

需要实现导航栏的两个隐藏规则：

• 用户登录后隐藏导航栏
• 处于/auth路由时不显示导航栏
  但当前的条件渲染方案无法生效，相关代码如下：

import React from 'react';
import Navbar from './Navbar';
import { BrowserRouter as Router, Routes, Route ,Navigate} from 'react-router-dom';
import {Login} from './Login';
import {SignUp} from './SignUp'
import { Home } from './Home';
import Freecomponent from './Freecomponent';
import AuthComponent from './AuthComponent';
import Cookies from 'universal-cookie';

function App() {
    const cookies = new Cookies();
    
return (
    <Router>
    {window.location.href === '/auth' ? null :  <Navbar />}
    <Routes>
    
        <Route path='/' element={<div><Home /></div>} exact />
        <Route path='/signup' element={<SignUp />} />
        <Route path='/signin' element={<Login />} />
        <Route path='/free' element={<Freecomponent />} />
        <Route path='/auth' element={cookies.get("TOKEN") ? <AuthComponent /> : <Navigate to='/' />} />
        
    </Routes>
    </Router>
);
}

export default App;

问题分析 #

1. 路由判断错误：window.location.href返回的是完整URL（比如http://localhost:3000/auth），直接和'/auth'对比永远不成立，应该用react-router提供的useLocation钩子获取当前路径。
2. 登录状态未监听：组件初始化时仅获取一次cookie，登录后cookie变化但组件不会重新渲染，导致导航栏不会自动隐藏。

修复后的代码 #

import React, { useState, useEffect } from 'react';
import Navbar from './Navbar';
import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
import { Login } from './Login';
import { SignUp } from './SignUp';
import { Home } from './Home';
import Freecomponent from './Freecomponent';
import AuthComponent from './AuthComponent';
import Cookies from 'universal-cookie';

function App() {
    const cookies = new Cookies();
    // 跟踪登录状态
    const [isLoggedIn, setIsLoggedIn] = useState(!!cookies.get("TOKEN"));
    // 获取当前路由路径
    const location = useLocation();

    // 监听cookie变化，更新登录状态
    useEffect(() => {
        const checkAuthStatus = () => {
            setIsLoggedIn(!!cookies.get("TOKEN"));
        };

        checkAuthStatus();
        // 也可以在Login/SignUp组件登录成功后，直接调用setIsLoggedIn更新状态，更及时
    }, [cookies]);

    // 导航栏显示条件：未登录 且 当前路径不是/auth
    const showNavbar = !isLoggedIn && location.pathname !== '/auth';

    return (
        <Router>
            {showNavbar && <Navbar />}
            <Routes>
                <Route path='/' element={<Home />} exact />
                <Route path='/signup' element={<SignUp />} />
                <Route path='/signin' element={<Login />} />
                <Route path='/free' element={<Freecomponent />} />
                <Route path='/auth' element={cookies.get("TOKEN") ? <AuthComponent /> : <Navigate to='/' />} />
            </Routes>
        </Router>
    );
}

export default App;

额外说明 #

• 建议在Login组件登录成功后，直接调用setIsLoggedIn(true)，这样状态更新更及时，无需依赖cookie监听。
• useLocation必须在Router内部组件中使用，这里App被Router包裹，可直接调用。
• !!cookies.get("TOKEN")将cookie值转为布尔值，确保登录状态是明确的true或false。

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