exclusive-coral

CreateLink makes all routes "active"

So I want to combine mantine's

NavLink

NavLink

with the type safety of Tanstack's

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

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

NavLink

and pass

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>

It works perfectly, but I loose the type safety on the

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.

TanStack•2y ago

exclusive-coral

CreateLink makes all routes "active"

So I want to combine mantine's

NavLink

NavLink

with the type safety of Tanstack's

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

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

NavLink

and pass

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>

It works perfectly, but I loose the type safety on the

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.

CreateLink makes all routes "active"

Similar Threads

CreateLink makes all routes "active"

Similar Threads

Similar Threads

Similar Threads