How to use RouterLink with Microsoft FluentUI React Link component

Question

Pretty straight forward. I've seen examples of React Router Link usage on other Microsoft Fluent UI controls. I have not found a way to use it with the Fluent UI Link component though.

Answer 1

Was able to get this working using the as prop found in the Fluent UI Link implementation section:

import React from 'react';
import { Link as RouterLink } from 'react-router-dom';

import { Link } from '@fluentui/react';

const ComponentName: React.FC = () => (
  <Link as={RouterLink} to="/pathName">
    Link Text
  </Link>
);

export default ComponentName;

Answer 2

You can use the prop onLinkClick on the Nav,if you prevent default and push to react router history instead you'll get the same behaviour without affecting the look and feel of fluent ui

import React from "react"
import import { withRouter } from "react-router-dom"
import { Nav } from "@fluentui/react"

class MyNavComponent extends React.Component {
    onLinkClick(evt, item){
        evt.preventDefault()
        this.props.history.push(item.url)
    }
    render(){
        return <Nav
            onLinkClick={this.onLinkClick.bind(this)}
            isOnTop
            groups={your..groups..here}
        />
    }
}
export const MyRoutedNavComponent = withRouter(MyNavComponent)