我實際上是 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所以如果我在主頁我不想顯示任何東西。
任何的想法？
uj5u.com熱心網友回復：
window.location.href是一種開箱即用的 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>
);
};
uj5u.com熱心網友回復：
<li>
{window.location.href !== "url of your home page" &&
<Link to="/" className="home"> <AiOutlineLeft /> </Link>
}
</li>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/360910.html
標籤：javascript 反应 前端
上一篇：字串化json的正則運算式