Using Anchor with Link from react-router

I’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 use props.dangerouslySetInnerHTML. Check the render method of Anchor.

There’s also the issue of passing props (like to) to the Link tag.

Any help appreciated!

[benshell]

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:

import React from 'react';
import { Link } from 'react-router-dom';
import Anchor from 'grommet/components/Anchor';

export default (props) => (
  <Link to={props.to}>
    <Anchor tag="span" primary={props.primary}>{props.children}</Anchor>
  </Link>
);

[alansouzati]

this.context.router.push(this.props.path); should do the trick.

Here is how we use Grommet Anchor with react-router:

// (C) Copyright 2014-2015 Hewlett Packard Enterprise Development LP

import React, { Component, PropTypes } from 'react';
import Anchor from 'grommet/components/Anchor';

/**
* This component is used to augment Grommet anchor
* with routing/history capabilities
*/
export default class NavAnchor extends Component {

  constructor () {
    super();
    this._onClick = this._onClick.bind(this);
  }

  _onClick (event) {
    event.preventDefault();
    this.context.router.push(this.props.path);
    if (this.props.onClick) {
      this.props.onClick();
    }
  }

  render () {
    const { path } = this.props;
    const { router } = this.context;
    let className = this.props.className || '';
    if (router.isActive(path)) {
      className += ' active';
    }
    let href = router.createPath(path);
    return (
      <Anchor {...this.props} className={className} href={href}
        onClick={this._onClick} />
    );
  }
};

NavAnchor.propTypes = {
  ...Anchor.propTypes,
  onClick: PropTypes.func,
  path: PropTypes.string.isRequired
};

NavAnchor.contextTypes = {
  router: PropTypes.object.isRequired
};

Usage

<NavAnchor path="/docs/accordion">Accordion</NavAnchor>