1

I'm currently trying to use Nav with react-router. The default behavior reloads the page, so I'm trying to use the Link component from react-router-dom.

It's quite difficult to preserve the default styling when overriding linkAs.

Is there any global way to override link navigation behavior?
Like defining a global link render function, which I can then set to render the Link component from react-router-dom?

Domysee
  • 12,718
  • 10
  • 53
  • 84

1 Answers1

0

Yes, it's possible!

2 things are required:

  1. Make a wrapper component that translates the Nav API to react-router-dom links.
  2. Specify the linkAs prop to the Nav component.

Wrapper component

This is a simple component that creates a react-router-dom link while using styles from Fabric:

import { Link } from "react-router-dom";
const LinkTo = props => {
  return (
    <Link to={props.href} className={props.className} style={props.style}>
      {props.children}
    </Link>
  );
};

Specify component for use in Nav

 <Nav groups={links} linkAs={LinkTo} />

Have also created a full working example at https://codesandbox.io/s/xenodochial-wozniak-y10tr?file=/src/index.tsx:605-644

JD Huntington
  • 348
  • 1
  • 5