1

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?

theycallmemorty
  • 12,515
  • 14
  • 51
  • 71

1 Answers1

0

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.

theycallmemorty
  • 12,515
  • 14
  • 51
  • 71
  • Tried this but the Nav itself doesn't update to reflect the location after clicking the link. Is there more to this (like also setting `selectedKey`)? – Emperor Eto Apr 15 '21 at 21:49
  • I found the original of this here (https://codepen.io/micahgodbolt/pen/EOVXGQ) but it doesn't even work properly in Codepen. This Nav control seems to be buggy at best and possibly worthless. – Emperor Eto Apr 15 '21 at 22:05
  • I added `@withRouter` to my parent component of the Nav and the Nav started following the route. It wasn't re-rendering before on route changes. – Emperor Eto Apr 15 '21 at 22:44