React中如何按路由分别渲染AuthNav与MainNav两个导航栏？

首先，原代码存在两个核心问题：

• 未正确获取当前路由路径（直接使用location会报错，需通过React Router的useLocation钩子获取）
• 仅判断了/路径，未覆盖登录、注册这类需要展示AuthNav的场景

以下是修正后的实现方案：

步骤1：导入React Router必要钩子 #

确保项目已安装并配置React Router，在组件中导入useLocation：

import { useLocation } from 'react-router-dom';

步骤2：调整Navbar组件逻辑 #

修改路由判断条件，覆盖登录、注册路径，并结合认证状态控制导航栏渲染：

const Navbar = () => {
  const location = useLocation(); // 获取当前路由路径
  // 定义需要展示AuthNav的路径集合
  const authRequiredPaths = ['/login', '/register'];

  return (
    <div>
      {/* 登录/注册路径展示AuthNav */}
      {authRequiredPaths.includes(location.pathname) ? (
        <AuthNav />
      ) : 
      {/* /home路径且用户已认证时展示MainNav */}
      location.pathname === '/home' && isAuthenticated ? (
        <MainNav />
      ) : (
        {/* 其他场景默认展示AuthNav（比如未认证访问/home） */}
        <AuthNav />
      )}
    </div>
  );
};

补充说明 #

• 如果你的登录页路径是根路径/，可以把'/'加入authRequiredPaths数组
• isAuthenticated需是项目中已实现的用户认证状态变量（比如从Context、Redux或本地存储中读取）
• 后续若需扩展路由规则，只需修改authRequiredPaths数组或新增条件判断即可

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