Question

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

当我尝试使站点响应时，我一直在尝试使NavLink选择后使react-bootstrap中的响应导航栏崩溃，但是除了Nav.Link之外，collapseOnSelect行为似乎不起作用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>

任何帮助将不胜感激！

Answer 1

我有同样的问题，我使用'react-bootstrap'中的Nav.Link作为'react-router-dom'中的Link，请不要忘记添加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;

Answer 2

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

This answer helped me.

Answer 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;

Answer 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>

具有react-router-dom NavLinks的react-bootstrap导航栏中的crashOnSelect

4 个答案: