如何根据 React 中的页面显示或隐藏按钮

Question

我实际上对 React 有点陌生，而且还在学习中，所以我无法弄清楚如何根据我当前在应用程序上的页面来显示我的按钮。我正在使用路由器 v6。这是我的路由器，里面有我的组件：

     <Router>
        <Navbar />
        <Routes>
          <Route
            path="/"
            element={<HomePage />} />
          <Route
            path="/CountryPage"
            element={<CountryPage />} />
        </Routes>
      </Router>

这是我的导航栏：

const Navbar = () => {
  return (
    <nav className="navbar-container">
      <div>
        <div>
          <ul className="navbar">
            <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>
  );
};

<li> <Link to="/" className="home"> <AiOutlineLeft /> </Link> </li>所以我想要的只是显示仅当我不在主页中时才显示的按钮，HomePage所以如果我在主页中我不想显示任何内容。

任何想法？

Answer 1

window.location.href如果您没有由更好的库（例如 React router）管理路由，则应该使用开箱即用的 JS 方法。另外，在这里，您实际上必须检查整个 URL，而不仅仅是路径名。所以这个方法的更正代码是

{ window.location.href !=== "yoursubdomian.yourdomain.extension/" && <li> <Link to="/" className="home"> <AiOutlineLeft /> </Link> </li>

我的建议是尝试使用 React Router 本身提供的规定的系统方法

使用useLocation()钩子提取pathname当前路由并检查它是否渲染<Link/>

const Navbar = () => {
  const location = useLocation()
 
  return (
    <nav className="navbar-container">
      <div>
        <div>
          <ul className="navbar">
            {location.pathname !=="/" && 
               <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>
  );
};