Using Anchor with Link from react-router
See original GitHub issueI’m trying to create links using the Anchor
component with the Link
component from react-router. I read in the docs that the tag
prop can be used for this:
The DOM tag to use for the element. The default is . This should be used in conjunction with components like Link from React Router. In this case, Link controls the navigation while Anchor controls the styling.
However I can’t seem to get it working since tag
is expecting a String and not another component. I tried <Anchor tag="Link">
but it attempted to render a stylesheet style <link>
instead.
Uncaught Invariant Violation: link is a void element tag and must not have
children
or useprops.dangerouslySetInnerHTML
. Check the render method of Anchor.
There’s also the issue of passing props (like to
) to the Link tag.
Any help appreciated!
Issue Analytics
- State:
- Created 7 years ago
- Reactions:2
- Comments:23 (10 by maintainers)
I’m just trying/learning Grommet and quickly ran into this issue as well, with React Router v4. It seems to me that the simplest solution is to create a new component to render Anchor as a span, inside of Link:
this.context.router.push(this.props.path);
should do the trick.Here is how we use Grommet Anchor with react-router:
Usage