dependent-tan

CreateLink makes all routes "active"

So I want to combine mantine's NavLink with the type safety of Tanstack's Link component. I followed this link https://tanstack.com/router/latest/docs/framework/react/guide/custom-link#createlink-with-third-party-libraries And came to this code

import { NavLink, NavLinkProps } from "@mantine/core";
import { createLink, Link } from "@tanstack/react-router";
import { ForwardedRef, forwardRef } from "react";

const CustomLink = (
  props: NavLinkProps,
  ref: ForwardedRef<HTMLAnchorElement>,
) => {
  return <NavLink {...props} ref={ref} component={Link} />;
};

export const NavigationLink = createLink(forwardRef(CustomLink));

import { NavLink, NavLinkProps } from "@mantine/core";
import { createLink, Link } from "@tanstack/react-router";
import { ForwardedRef, forwardRef } from "react";

const CustomLink = (
  props: NavLinkProps,
  ref: ForwardedRef<HTMLAnchorElement>,
) => {
  return <NavLink {...props} ref={ref} component={Link} />;
};

export const NavigationLink = createLink(forwardRef(CustomLink));

In my nav component:

<AppShell.Navbar p="md">
  <NavigationLink label="Products" to="/products" />
  <NavigationLink label="About" to="/about" />
</AppShell.Navbar>

<AppShell.Navbar p="md">
  <NavigationLink label="Products" to="/products" />
  <NavigationLink label="About" to="/about" />
</AppShell.Navbar>

This makes all my links "active", not only the one selected If I directly use the NavLink and pass Link as a component

<AppShell.Navbar p="md">
  <NavLink component={Link} label="Products" to="/products" />
  <NavLink component={Link} label="About" to="/about" />
</AppShell.Navbar>

<AppShell.Navbar p="md">
  <NavLink component={Link} label="Products" to="/products" />
  <NavLink component={Link} label="About" to="/about" />
</AppShell.Navbar>

It works perfectly, but I loose the type safety on the to prop. Any idea why this doesn't / what I'm doing wrong ?

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

CreateLink makes all routes "active"

Did you find this page helpful?