How to correctly use Reach Router Links with a Fluent UI Nav

Question

Is there a way to make the Fluent UI (formerly Office Fabric UI) Nav component correctly work replacing it's <a> element links with a custom link such as <Link> from Reach Router?

Fluent UI Nav provides an onRenderLink props but that only changes the inner content innermost <a> element. It leaves the outer wrapping element with a traditional <a> which causes full page re-renders when the user uses it.

It also provides the linkAs prop but that changes the entire content of the "Group Header" and takes a way all of the nice CSS styling advantages of using the Nav in the first place.

Is there a way to actually get this working?

Answer 1

I did a little more googling and found this codepen which uses LinkAs :

(props) => {
   return <Link className={props.className} style={{color: 'inherit', boxSizing: 'border-box'}} to={props.href}>
     <span style={{display: 'flex'}}>
      { !!props.iconProps && <Icon style={{margin: '0 4px'}} {...props.iconProps} /> }
      {props.children}
      </span>

    </Link> ;
  }

A little bit disappointing that you basically have to reverse engineer their CSS and render it yourself in order to get this working.