How can I style links correctly when using react-router

[Sanderand]

Hello there,

I've googled this issue and was surprised that I didn't find a solution for this seemingly common issue. I'm also not sure if this is rather a issue with Fluent UI or with React Router. Because React Router is a somewhat common/popular routing extension, I figured it would make sense to be able to combine Router Links with Fluent UI links.

I am trying to combine using "@fluentui/react-components": "^9.0.0" and "react-router": "^7.1.5" and can't figure out, how to do that.

Either I use the React Router Link, which allows me to do client-side redirects (without full page reloads) OR I use the Fluent UI Link, which looks the way I want my links to look. I would like to be able to solve both of those issues: having links look correctly and work without client-side reloads.

https://codesandbox.io/p/sandbox/rtc7r4?file=%2Fsrc%2FApp.tsx%3A7%2C1

In the past, I've used Material UI which solved the problem like this:

import { Link as RouterLink } from 'react-router';
import { Link as MuiLink } from '@mui/material';

<MuiLink component={RouterLink} to="/some/route">link text</MuiLink>

Is there a similar concept to this with Fluent UI? How else can I solve this problem?

Thanks!

[khmakoto]

You can use our style hooks to style the RouterLink, I've modified your codesandbox to achieve this:

https://codesandbox.io/p/sandbox/react-router-link-styled-as-fluent-link-cvhfd2

[Sanderand]

Great. Thanks for this!

I'm curious about the useLinkStyles_unstable. How unstable is this really? What should this name tell me as a consumer? Can I rely on this being there in the next major release? Are breaking changes of these hooks considered as something internal or will they be listed as (breaking) changes in the changelog?

[khmakoto]

No problem!

They were named like that pretty early in the development process but are pretty stable now, I think we'll drop the _unstable suffix in the next major release (we'll probably still shape the _unstable suffix names as deprecated and provide codemods).