单击 BrowserRouter 链接时隐藏全屏导航答案

【问题标题】：Hide full screen navigation when BrowserRouter Link is clicked单击 BrowserRouter 链接时隐藏全屏导航
【发布时间】：2020-08-28 13:33:37
【问题描述】：

我正在为我目前正在开发的 React 应用设置导航。

当点击标题中的按钮时，我有一个覆盖网站的全屏导航。

我使用 useState 来打开和关闭覆盖，效果很好，但我需要找到一种方法来在点击导航中的页面链接时自动隐藏导航覆盖。

这是我的导航组件：

import React, { useState } from 'react';
import { NavLink as Link } from 'react-router-dom';

function Navigation(){
    const[showMenu, setShowMenu] = useState(false)

    let menu
    
    if(showMenu){
        menu = 
        <nav>
            <ul>
                <Link to="/" exact activeStyle={{color: 'black'}}><li>Home</li></Link>
                <Link to="/about"><li>About</li></Link>
                <Link to="/work"><li>Work</li></Link>
                <Link to="/hire"><li>Hire Me</li></Link>
            </ul>
        </nav>
    }

    return(
        <>
            <button className="nav-btn" onClick={() => setShowMenu(!showMenu)}>Menu</button>
            {menu}
        </>
    );
}

export default Navigation;

我尝试将 onClick 添加到这样的链接中：

<Link onClick={() => useState(false)} exact activeStyle={{color: 'black'}} to="/">
  <li>Home</li>
</Link>

但我只是收到一个编译器错误“无法在回调中调用 React Hook “useState”。”所以这就是我的想法。

任何指导都将不胜感激，因为我正在学习 React。

【问题讨论】：

只需调用一个函数，然后点击调用函数内的useState

标签： reactjs

【解决方案1】：

useState 必须从方法中执行。只需创建一个方法并在其中设置useState。

function navigate(){
   useState(false)
}

. . . . . . . 

<Link onClick={navigate} exact activeStyle={{color: 'black'}} to="/">
  <li>Home</li>
</Link>

【讨论】：

【解决方案2】：

设法弄明白了。

我对 OnClick 侦听器的看法是正确的，但其他人则不然。

<Link onClick={() => setShowMenu(false)} to="/" exact activeStyle={{color: 'black'}}>
   <li>Home</li>
</Link>

【讨论】：