You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am using <LinkContainer>s for my <NavDropdown.Item> s and have a sidenavigation with standard <Link> tags. Problem arises when I click on normal links, the linkcontainer follows and sets that linkcontainer to active but doesn't make the previous linkcontainer not active, so I end up with two active linkcontainers. Anyone have a fix? Code is here:
I'm afraid but this seems to be related to react-bootstrap as it relies on active property passed to <Nav.Link>, however, <LinkContainer> does handle className itself and doesn't do anything with active property. Thus, a workaround is to explicitly set active to false on each <Nav.Link>, leaving the rest to react-router-bootstrap to handle.
Or, as an option, you can create a helper component like this:
However, I think we should consider adding a way to control the behaviour of an active prop passed to the component that is wrapped. @taion, @jquense, what do you think about this? I think it's required for hassle-free use of react-router and react-bootstrap, which we try to make friendly to each other by using react-router-bootstrap.
sambecker, sailor95, hexnaught, robfr77, BenjaminJaume and 20 moreKBeDevelnetpedro-com, Pascal912, klimeryk, daianamezdrea and marsialdev
I think we can but I'd also consider adding a mechanism to control this behaviour as it's not just react-bootstrap this library is used for. Some of the use cases would require wrapped component to not have active property changed.
Maybe additional property (something like setActive), which is set to true by default? If truthy, then active property is explicitly set for a wrapped component, otherwise, do not touch it at all.
Will require another version bump if we implement it though as the default behaviour will change and new property will be set for a wrapped component...
so in other places i just have an activePropName prop on the container
the bigger question might be "what's a good default?" and i think passing down the active prop as the default behavior might be better than making assumptions about class names
@v12 Thanks for your suggestion, it almost worked for me.
ℹ️ For those who will still fail with two different links being active even after providing @v12's workaround: make sure those links are always rerendered when changing your location from outside. In my code I used key with pathname passed into:
exportconstMyMenu=()=>{const{pathname}=useLocation()// previously imported from 'react-router-dom'return(<ListGroupkey={pathname}><LinkContainerexactto="/path/to/first"><ListGroup.Itemactionactive={false}>First Item</ListGroup.Item></LinkContainer><LinkContainerexactto="/path/to/second"><ListGroup.Itemactionactive={false}>Second Item</ListGroup.Item></LinkContainer><LinkContainerexactto="/path/to/third"><ListGroup.Itemactionactive={false}>Third Item</ListGroup.Item></LinkContainer></ListGroup>);};
Hope this may help someone in future.
saadqc, Selino, Emreburak1, chrishuman0923, tieste and 3 moresaadqcLucaBn
@alekseykarpenko Thank you. Your solution is working just fine. But be aware that sometimes such a solution could be overkill and cause side effects. This means every time pathname will change (even some small part of it like id) ListGroup will re-render from scratch. And if you have some bigger logic inside ListGroup (e.g. list of the link depending on some data from the server) it could cause heavy re-rendering on each user click.
Activity
manonthemoon42 commentedon Feb 18, 2019
I also have the exact same issue.
A regular link would add
active
to theNav.Link
, but it doesn't remove theactive
from the last one.@willbee28 , did you find any solutions for that issue?
willbee28 commentedon Feb 18, 2019
v12 commentedon Apr 5, 2019
I'm afraid but this seems to be related to
react-bootstrap
as it relies onactive
property passed to<Nav.Link>
, however,<LinkContainer>
does handleclassName
itself and doesn't do anything withactive
property. Thus, a workaround is to explicitly setactive
to false on each<Nav.Link>
, leaving the rest toreact-router-bootstrap
to handle.Or, as an option, you can create a helper component like this:
However, I think we should consider adding a way to control the behaviour of an
active
prop passed to the component that is wrapped. @taion, @jquense, what do you think about this? I think it's required for hassle-free use ofreact-router
andreact-bootstrap
, which we try to make friendly to each other by usingreact-router-bootstrap
.taion commentedon Apr 5, 2019
In previous versions we actually just injected the
active
prop to children: 2c28b9d#diff-7d608450e48ccf30094f19938db3948cL95Could we just make that the behavior again?
v12 commentedon Apr 5, 2019
I think we can but I'd also consider adding a mechanism to control this behaviour as it's not just
react-bootstrap
this library is used for. Some of the use cases would require wrapped component to not haveactive
property changed.Maybe additional property (something like
setActive
), which is set totrue
by default? If truthy, thenactive
property is explicitly set for a wrapped component, otherwise, do not touch it at all.Will require another version bump if we implement it though as the default behaviour will change and new property will be set for a wrapped component...
taion commentedon Apr 5, 2019
so in other places i just have an
activePropName
prop on the containerthe bigger question might be "what's a good default?" and i think passing down the
active
prop as the default behavior might be better than making assumptions about class namesdavidjb commentedon Mar 20, 2020
Just encountered this issue -- is there any further progress? @v12's workaround still works and is pretty clean.
alekseykarpenko commentedon Apr 15, 2020
@v12 Thanks for your suggestion, it almost worked for me.
ℹ️ For those who will still fail with two different links being active even after providing @v12's workaround: make sure those links are always rerendered when changing your location from outside. In my code I used
key
withpathname
passed into:Hope this may help someone in future.
Lyubomyr commentedon Mar 11, 2021
@alekseykarpenko Thank you. Your solution is working just fine. But be aware that sometimes such a solution could be overkill and cause side effects. This means every time pathname will change (even some small part of it like id) ListGroup will re-render from scratch. And if you have some bigger logic inside ListGroup (e.g. list of the link depending on some data from the server) it could cause heavy re-rendering on each user click.
einbulinda commentedon Aug 2, 2021
Just used NavLink from react-router-dom and passed className="nav-link" to it. Worked just fine.
Fix duplicate active pills in navigation
3 remaining items