问题
I'm making a website where I'm using react-router-dom's NavLink components to prevent rerenders for a single page application experience.
As I am trying to make the site responsive, I have been trying to make the responsive navbar from react-bootstrap collapse after selecting a NavLink, but the collapseOnSelect behaviour doesn't seem to work for anything other than the Nav.Link components that come with react-bootstrap.
Other solutions have recommended passing down props to the nav (navExpanded:true) with manual toggle functions etc, but this seems to still force a rerender due to the state change. The main reason I want to avoid this is because I have made transitions between pages using 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>
Any help would be greatly appreciated!
回答1:
I have the same problem, i use the Nav.Link from 'react-bootstrap' as Link from 'react-router-dom', don't forget to add the href attribut. In this example all links except pizzas link collapse the nav bar. Hope it's Help You.
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;
回答2:
Found an answer that worked for me on a similar post. Adding EventKey="1"
, EventKey="2"
, etc. to the NavLink
items was all it needed. I am using react-router
and never needed to switch it to react-router-bootstrap
.
This answer helped me.
回答3:
I found the solution.
You need to use react-router-bootstrap instead of react-router
to make it work.
Example:
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:
Use these settings and it will work.
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>
来源:https://stackoverflow.com/questions/56464444/collapseonselect-in-react-bootstrap-navbars-with-react-router-dom-navlinks