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

Posted

技术标签:

【中文标题】单击 BrowserRouter 链接时隐藏全屏导航【英文标题】:Hide full screen navigation when BrowserRouter Link is clicked 【发布时间】: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 【参考方案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>

【讨论】:

以上是关于单击 BrowserRouter 链接时隐藏全屏导航的主要内容,如果未能解决你的问题,请参考以下文章

从移动应用全屏打开外部链接

Android:如何正确隐藏系统 UI

单击“阅读更多”链接时截断并显示或隐藏链接文本

打开链接时阻止 Rails 应用程序在 iOS Safari 上退出全屏

如何在Landscape中全屏显示UISplitViewController的DetailView

在移动浏览器中隐藏工具栏时使高度为 100%