Reactjs Reactstrap-折叠导航链接上的导航栏仅在手机上单击

我有一个导航栏，它在桌面上打开，在手机上折叠。我可以点击手机上的导航栏来打开导航栏。当我点击移动设备上的导航链接时，我希望导航栏再次折叠。我为NavLink添加了一个onclick（）切换函数，该函数在移动设备上运行良好，但现在桌面上的Navbar将折叠，并在单击NavLink后立即再次打开。有没有办法让导航栏始终在桌面上打开，并在移动设备上单击导航链接时将其折叠

const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);

<Navbar color="light" light expand="md">
  <NavbarToggler onClick={toggle} />
  <Collapse isOpen={isOpen} navbar>
    <Nav className="mr-auto" navbar>
      <NavItem>
        <NavLink data-toggle="collapse" onClick={() => {history.push("/"); toggle()}}>Home</NavLink>
      </NavItem>
    </Nav>
  </Collapse>
</Navbar>

const[isOpen，setIsOpen]=useState（false）；
常量切换=（）=>setIsOpen（！isOpen）；
{history.push（“/”；toggle（）}}>Home

有几种方法可以在javascript中实现这一点。您可以评估

userAgent

，也可以使用视口/文档维度作为是否触发切换的条件

例如：

const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);

const mobileToggle = () => {
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
   setIsOpen(!isOpen);
  };
};

<Navbar color="light" light expand="md">
  <NavbarToggler onClick={toggle} />
  <Collapse isOpen={isOpen} navbar>
    <Nav className="mr-auto" navbar>
      <NavItem>
        <NavLink data-toggle="collapse" onClick={() => {history.push("/"); mobileToggle()}}>Home</NavLink>            {/* <---- change this to mobileToggle too*/}
      </NavItem>
    </Nav>
  </Collapse>
</Navbar>

常量[isOpen，setIsOpen]=useState（false）；
常量切换=（）=>setIsOpen（！isOpen）；
常量移动切换=（）=>{
if（/Android | webOS | iPhone | iPad | iPod | BlackBerry | IEMobile | Opera Mini/i.test（navigator.userAgent））{
setIsOpen（！isOpen）；
};
};
{history.push（“/”；mobileToggle（）}}>Home{/*