React中使用Router v6如何根据当前页面控制Navbar按钮的显示隐藏

实现方案 #

你可以直接使用React Router v6内置的useLocation钩子获取当前路由路径，做条件渲染即可，无需修改现有路由配置，仅需调整Navbar组件代码，步骤如下：

1. 从react-router-dom中导入useLocation钩子
2. 在组件内获取当前路径，判断是否为首页根路径/，非首页时才渲染返回按钮

修改后的完整Navbar代码

import { Link, useLocation } from 'react-router-dom';
import { AiOutlineLeft } from 'react-icons/ai';
import { BsFillGearFill } from 'react-icons/bs';

const Navbar = () => {
  // 获取当前路由的位置信息，路由切换时会自动更新
  const location = useLocation();
  // 判断当前是否为首页
  const isHomePage = location.pathname === '/';

  return (
    <nav className="navbar-container">
      <div>
        <div>
          <ul className="navbar">
            {/* 仅当非首页时渲染返回按钮 */}
            {!isHomePage && (
              <li>
                <Link to="/" className="home"> <AiOutlineLeft /> </Link>
              </li>
            )}
            <li data-testid="tab-name">
              Current Tab
            </li>
            <li>
              <BsFillGearFill className="settings" />
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};

useLocation会自动监听路由变化，切换页面时会实时更新路径值，无需额外添加事件监听逻辑。

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