ReactJs如何使点击按钮注册后不显示

Question

您好，如何在单击按钮注册后将其隐藏我尝试了几种方法，但下面的代码对我不起作用。 谢谢................................................. ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... .....................

import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';


const Navbar = () => {
    const navigate = useNavigate();

    const Logout = async () => {
        try {
            await axios.delete('http://localhost:5000/logout');
            navigate("/");
        } catch (error) {
            console.log(error);
        }
    }

    const [state,setState]=useState(false);  
    
    const toggle=() => {
        setState(!state);
    }
 

 


    return ( 
        <nav className="navbar is-light" role="navigation" aria-label="main navigation">
            <div className="container">
                <div className="navbar-brand">
                    <a className="navbar-item" href="https://bulma.io">
                        <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" alt="logo" />
                    </a>

                    <a href="/" role="button" className="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                    </a>
                </div>

                <div id="navbarBasicExample" className="navbar-menu">
                    <div className="navbar-start">
                        <a href="/" className="navbar-item">
                            Home
                        </a>
                    </div>

                    <div className="navbar-end">
                        <div className="navbar-item">
                            <div className="buttons">
                                <button onClick={Logout} className="button is-light">
                                    Log Out
                                </button>
                            </div>
                        </div>
                    </div>

                    <div className="navbar">
                        <div className="navbar-item">
                            <div className="buttons">
                                <button   onClick={() => {navigate('/register'); toggle();   }}  className="button is-light"> 
                                Register
                                </button> 
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </nav>
    )
    }

export default Navbar

Answer 1

您正在导航到“注册”，因此，假设导航栏未卸载，我认为最好的方法是使用useLocation挂钩来检查用户是否在此路径上，例如

///...
const location = useLocation();
return(
///....
   {
      location.pathname !== '/register' && (
         <button   onClick={() => {navigate('/register');  }}  className="button is-light"> 
                                Register
                                </button> 
      )
    }

使用状态方法：

//...
const [showRegisterButton, setShowRegisterButton] = useState(true)
return (
  //...
   
```{showRegisterButton && (<button   onClick={() => {navigate('/register'); setShowRegisterButton(false);   }}  className="button is-light"> 
                                Register
                                </button> 
)}

但是，再次假设导航栏在您执行导航操作时不会卸载