在导航栏中的某些 url 上显示/隐藏组件反应 js

Question

当用户访问某些页面时，我试图隐藏导航栏中的链接。例如，当用户进入登陆页面时，我试图隐藏订单和购物篮，只留下登录链接。不知道如何实现。感谢您的帮助，因为我对 React Js 很陌生。 这是我的代码：

function Header() {
const [{ basket, user }, dispatch] = useStateValue();

const handleAuthentication = () => {
    if (user) {
        auth.signOut();
    }
}

    return (
        
        <nav className="header bg-dark">

           <Link to="/home">
            <FontAwesomeIcon icon={faStoreAlt} className= "header__logo m-1"/>
            </Link>

            {/* Links */}
            <Link to="/landing">
         <div className="header__right ">Laanding</div>
            </Link>

            <div className="header__nav ">
                <Link to={!user && "/login"} className="header__link">
                <div onClick={handleAuthentication} className="header__option">
                    <span className="header__optionLineOne">Hello, {!user ? 'Guest' : user.email}</span>
                    <span className="header__optionLineTwo">{user ? 
                    'Sing Out' : 'Sing In'}</span>
                </div>
                </Link>

                <Link to="/orders" className="header__link">
                <div className="header__option">
                    <span className="header__optionLineOne">Returns</span>
                    <span className="header__optionLineTwo">Orders</span>
                </div>
                </Link>

                <Link to="/checkout">
                    <div className="header__optionBasket">
                        {/* Shopping basket icon */}
                        <FontAwesomeIcon icon={faShoppingBasket}/>
                        {/* Number of items in the basket */}
                        <span className="header__optionLineTwo 
                        header__basketCount">{basket?.length}</span>
                    </div>
                </Link>

            </div>        
        </nav>
    )
}

export default Header

Answer 1

我希望这会有所帮助：

if(Window.location == your_url) {
var navBar = document.queryselector('your_navbar');

navBar.parentNode.removeChild(navBar);
}