CreateLink makes all routes "active"

So I want to combine mantine's

NavLink

NavLink

NavLink

NavLink with the type safety of Tanstack's

Link

Link

Link

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));

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>

<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

NavLink

NavLink

NavLink and pass

Link

Link

Link

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>

<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

to

to

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.

No replies yetBe the first to reply to this messageJoin

CreateLink makes all routes "active"

Similar Threads

Similar Threads

Similar Threads