React Router and Anchor do not work together

I am setting up a new React project using Grommet. Grommet Anchor and React Router Link won’t work together. Here is my requirements:

1. The links should be stylized by Grommet. I am using Anchor component for this and UI theming is controlled by Grommet.
2. I am using React Router, and the app heavily depends on Link component.

Reasoning behind why this is crucial

1. I want the user to switch between different themes. Since the theming is controlled by Grommet, I want to use components that are naturally reactive to the theme and theme context.
2. I cannot use bare bone <Anchor href= because it causes page reload. On the other hand, <Link jumps to the URL without page reload / flicker.
3. A suggested method elsewhere is to use <Anchor onClick={()=> props.history.push('/path/123')} .... This is not desirable because I lose the semantic and the behavior of an anchor. User would not be able to perform “copy the link URL” or “open the link in new tab” features (by right clicking on desktop or long pressing on phone). It is not the right way. You’d use button instead.
4. Another suggested way was to wrap the component in the following manner:

   <Anchor as="span">
     <Link to="/path/123"/>Path 123</Link>
   </Anchor>
   

   It does not work. The Grommet theme is not rendering the Link here.
5. Yet another post suggests to user <Anchor as={Link} ... does not work.

Expected Behavior

Grommet should have a way to wrap Link and NavLink of React Router – which is probably the most commonly used routing library.

Actual Behavior

Anchor does not work desirably with Link.

References

1. https://github.com/grommet/grommet/issues/2855#issuecomment-485305773
2. https://github.com/grommet/grommet/issues/2463#issuecomment-441462312
3. Getting rid of browser warning when using Grommet Anchor as Link from react-router-dom
4. Relevant discussion on Slack

Your Environment

• Packages used:

  "grommet": "^2.7.11",
  "react-router-dom": "5.0.1",
  "styled-components": "^4.4.0"
  

• Chrome latest
• MacOS Majave

[budiadiono]

I’m using typescript and customize the Anchor this way:

import { Anchor, AnchorProps } from 'grommet/components/Anchor'
import React from 'react'
import { Link, LinkProps } from 'react-router-dom'

export const AnchorLink: React.FC<AnchorLinkProps> = props => {
  return <Anchor as={Link} {...props} />
}

export type AnchorLinkProps = LinkProps &
  AnchorProps &
  Omit<JSX.IntrinsicElements['a'], 'color'>

Usage:

<AnchorLink to="/foo" label="Foo Page"/>

And it works!

– UPDATE:

Omit colorProp, hasIcon, hasLabel, focus props before passing it to Link component to avoid browser warnings.

   ...
   return <Anchor
      as={({ colorProp, hasIcon, hasLabel, focus, ...p }) => <Link {...p} />}
      {...props}
    />
}

[quinnturner]

My current solution for a routed button is:

interface RouterLinkProps {
  path: string;
}

const RouterButtonBase = (
  props: RouteComponentProps & RouterLinkProps & ButtonProps,
) => {
  return (
    <Button
      {...props}
      href={props.path}
      onClick={e => {
        e.preventDefault();
        props.history.push(props.path);
      }}
    />
  );
};

const RouterButton = withRouter(RouterButtonBase);

I add the href so that the browser detects that it’s a “routed button.” I cancel the event, then push to the history stack.

Example:

<RouterButton
  path={`/example/path`}
  icon={<Add size="small" />}
  label="Add example"
  primary
/>