Comments (6)
same problem here.
from react-router-bootstrap.
Any forecast on the publishing date?
I see the last published release from 2y ago.
from react-router-bootstrap.
This is published now
from react-router-bootstrap.
I was able to reproduce this issue with react & react-dom set to version 18.2.0.
This simple PR resolves the issue: #318
from react-router-bootstrap.
Quick solution for anyone waiting for an update, drop this standalone component into your project and use it instead (works with typescript/react18):
import React, { ReactElement, CSSProperties, MouseEvent } from 'react';
import { useHref, useLocation, useMatch, useNavigate } from 'react-router-dom';
interface LinkContainerProps {
children: ReactElement;
onClick?: (event: MouseEvent) => void;
replace?: boolean;
to: string | { pathname: string };
state?: object;
activeClassName?: string;
className?: string;
activeStyle?: CSSProperties;
style?: CSSProperties;
isActive?: ((match: any, location: any) => boolean) | boolean;
}
const isModifiedEvent = (event: MouseEvent) =>
!!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
export const LinkContainer: React.FC<LinkContainerProps> = ({
children,
onClick,
replace = false,
to,
state,
activeClassName = 'active',
className,
activeStyle,
style,
isActive: getIsActive,
...props
}) => {
const path = typeof to === 'object' ? to.pathname || '' : to;
const navigate = useNavigate();
const href = useHref(typeof to === 'string' ? { pathname: to } : to);
const match = useMatch(path);
const location = useLocation();
const child = React.Children.only(children);
const isActive = !!(getIsActive
? typeof getIsActive === 'function'
? getIsActive(match, location)
: getIsActive
: match);
const handleClick = (event: MouseEvent) => {
if (children.props.onClick) {
children.props.onClick(event);
}
if (onClick) {
onClick(event);
}
if (
!event.defaultPrevented && // onClick prevented default
event.button === 0 && // ignore right clicks
!isModifiedEvent(event) // ignore clicks with modifier keys
) {
event.preventDefault();
navigate(to, {
replace,
state,
});
}
};
return React.cloneElement(child, {
...props,
className: [
className,
child.props.className,
isActive ? activeClassName : null,
]
.join(' ')
.trim(),
style: isActive ? { ...style, ...activeStyle } : style,
href,
onClick: handleClick,
});
};
from react-router-bootstrap.
@Anonyfox If I understand correctly, this should be done for all the components which looks like a huge overkill.
from react-router-bootstrap.
Related Issues (20)
- `LinkContainer` turns all children's tags into `a`'s. HOT 1
- Why is this not part of react-bootstrap? I would prefer not to do a separate install. HOT 1
- LinkContainer to={..} does not read state variable
- Could not load react-router-dom
- react-router-dom v 6.x? HOT 18
- LinkContainer does not work in router-dom v6 HOT 1
- react-router-bootstrap LinkContainer wrapping a Nav.Link incompatible with latest react-router-dom v.6.0.2 HOT 3
- LinkContainer doesn't actually support NavLink props (className, style) HOT 2
- uhh..types? HOT 2
- Importing react-router-bootstrap includes all of lodash HOT 1
- Dependency Dashboard
- Support for Next.js?
- LinkContainer requires pathname in 'to' object. Link does not. HOT 1
- LinkContainer does not pass along "state" property
- Crashing randomly on dev - useNavigate() may be used only in the context of a <Router> component HOT 2
- Can't use search params in LinkContainer to prop HOT 1
- Standard <Link> tag loose active class while selecting bootstrap dropdown option
- 'LinkContainer' cannot be used as a JSX component. Its type 'LinkContainer' is not a valid JSX element type.
- Doesn't work for forms
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-router-bootstrap.