带有 react-router-dom NavLinks 的 react-bootstrap 导航栏中的 collapseOnSelect

Posted 2023-02-22

【中文标题】带有 react-router-dom NavLinks 的 react-bootstrap 导航栏中的 collapseOnSelect

【英文标题】：collapseOnSelect in react-bootstrap navbars with react-router-dom NavLinks

【发布时间】：2019-10-21 04:44:32

【问题描述】：

我正在创建一个网站，我在其中使用 react-router-dom 的 NavLink 组件来防止重新呈现单页应用程序体验。

当我试图使网站具有响应性时，我一直试图在选择 NavLink 后使响应引导的响应式导航栏崩溃，但 collapseOnSelect 行为似乎不适用于 Nav.Link 以外的任何东西react-bootstrap 自带的组件。

其他解决方案建议使用手动切换功能等将道具传递给导航 (navExpanded:true)，但这似乎仍会由于状态更改而强制重新渲染。我想避免这种情况的主要原因是因为我使用 react-transitions-group 在页面之间进行了转换。

<Navbar collapseOnSelect expand="md" variant="dark">
    <Container>
        <Navbar.Brand href="/"><Logo/></Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="Navs ml-auto">
                <NavLink className="nav-link" to="/about">ABOUT</NavLink>
                <NavLink className="nav-link" to="/portfolio">PORTFOLIO</NavLink>
                <NavLink className="nav-link" to="/contact">CONTACT</NavLink>
            </Nav>
        </Navbar.Collapse>
    </Container>
</Navbar>

任何帮助将不胜感激！

【问题讨论】：

我遇到了同样的问题，维护者已经关闭了三个没有解决的 github 问题。他给我的所有建议都失败了。我真的不认为它的工作......见：github.com/react-bootstrap/react-bootstrap/issues/4081

找到了解决办法，看我的回答。

【参考方案1】：

我有同样的问题，我使用来自“react-bootstrap”的 Nav.Link 作为来自“react-router-dom”的链接，不要忘记添加 href 属性。 在此示例中，除比萨饼链接外的所有链接都会折叠导航栏。 希望对你有帮助。

import React from 'react';
import  Navbar, Nav  from 'react-bootstrap';
import NavBrand from './NavBrand/NavBrand';
import  Link  from 'react-router-dom';

const Navigation = ( brand ) => 
    return (
        <Navbar collapseOnSelect expand='sm' bg='dark' variant='dark' fixed='top'>
            <NavBrand text=brand.text />
            <Navbar.Toggle aria-controls='responsive-navbar-nav' />
            <Navbar.Collapse id='responsive-navbar-nav'>
                <Nav className='mr-auto'>
                    <Nav.Link as=Link to='/assiettes' href='/assiettes'>
                        ASSIETTES
                    </Nav.Link>
                    <Nav.Link as=Link to='/pizzas'>
                        PIZZAS
                    </Nav.Link>

                    <Nav.Link as=Link to='/sandwichs' href='/sandwichs'>
                        SANDWICHS
                    </Nav.Link>

                    <Nav.Link as=Link to='/tacos' href='/tacos'>
                        TACOS
                    </Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );
;

export default Navigation;

【讨论】：

找到了解决办法，看我的回答。

太棒了 - 这甚至对我使用 import Link from "gatsby-plugin-intl";

有用

如果您有一个带有“/”href 的“主页”链接，您可能会发现它在页面加载时未设置为活动。您可以使用 react-router-dom 中的 NavLink 而不是 Link 并应用 activeClassName='active' 道具来解决此问题。不需要 react-router-bootstrap，它只支持 react-router v4。

如果使用锚链接，你有解决方案吗？因为当我使用 HasLink 解决问题时，collapseOnSelect 不起作用..

【参考方案2】：

在类似的帖子中找到了对我有用的答案。只需将EventKey="1"、EventKey="2" 等添加到NavLink 项目中即可。我正在使用react-router，并且不需要将其切换到react-router-bootstrap。

This answer helped me.

【参考方案3】：

我找到了解决办法。

您需要使用react-router-bootstrap 而不是react-router 才能使其工作。

例子：

import  Navbar, Nav  from "react-bootstrap";
import React from "react";
import  LinkContainer  from "react-router-bootstrap";

class Navigation extends React.Component 

  render() 
    return (
        <Navbar collapseOnSelect>
          <Navbar.Brand/>
          <Navbar.Toggle/>
          <Navbar.Collapse>
            <Nav className="mr-auto">
              <LinkContainer to="/page1/">
                <Nav.Link>Create</Nav.Link>
              </LinkContainer>
              <LinkContainer to="/page2/">
                <Nav.Link>Open Disputes</Nav.Link>
              </LinkContainer>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
    );
  


export default Navigation;

【参考方案4】：

使用这些设置，它会起作用。

import  Nav, Navbar  from "react-bootstrap";
import  useHistory, Link  from "react-router-dom";

     <Nav.Link // Use Nav.Link from react-bootstrap

        as=Link  // Use as prop and set to Link from react-router-dom  
 
        eventKey="0" // add different eventKey to all Nav.link

        to="/profile"
      >
        Profile
      </Nav.Link>