如何根据 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 是一种开箱即用的 JS 方法，如果您的路由没有由一些更好的库（如 React 路由器）管理，则您应该使用它。此外，在这里，您实际上必须检查 整个 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>
  );
};

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

How to show or hide a button depending on the page in React

javascript

frontend

reactjs