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

您正在导航到'register'，所以，假设导航栏没有卸载，我认为最好的方法是使用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> 
)}

但是，同样，这是假设导航栏没有卸载当你执行导航操作

时