Wiring up NavLink active prop to react-router

[lukepighetti]

<NavLink
  component={Link}
  active={???}
  to={`/app`}
  label="Links"
/>

Been poking around through the docs on both Mantine 7 and react-router-dom, and unfortunately haven't seen any clear path to connecting the NavLink.active prop to react-router-dom such that it is active after the to prop has been navigated to.

Any insights?

[rtivital]

Use https://reactrouter.com/en/main/utils/match-path

[rtivital]

You can add any additional attributes to the root element by supplying them as props.

[corydeppen]

It's not about adding attributes in the case of Remix/React Router, as the aria-current attribute is already added by the framework/library. The issue is that Mantine only applies active styles for the data-active attribute. If Mantine expanded the active style to also include aria-current, I thought that might allow the active style to be applied when frameworks like Remix used aria-current="page" to indicate the link is for the active page.

[corydeppen]

I changed that one line in the generated styles and it appears to apply the active style when a Remix NavLink is used inside renderRoot without having to add anything to either the Mantine or Remix NavLink components.

- &:where([data-active]) {
+ &:where([data-active], [aria-current='page']) {

I'd be happy to submit a PR if it's something you might consider.

[rtivital]

Okay, I'm fine with it, you are welcome to submit a PR.

[corydeppen]

I've created #6180.