Loosing type safety when wrapping <Link>

Anyone have an idea on how to keep type safety while wrapping <Link> in a generic component like so? Right now typescript allows me to provide invalid routes like so

<Link to="/invalid">

<Link to="/invalid">

and I don't like that I loose the type safety.

import { Link } from "@tanstack/react-router";
import clsx from "clsx";
import type { ComponentProps, ReactNode } from "react";

export const Anchor = ({
    className,
    children,
    ...props
}: ComponentProps<typeof Link> & {
    children: ReactNode;
    className?: string;
}) => {
    return (
        <Link
            className={clsx("hover:underline text-amber-700 font-medium", className)}
            {...props}
        >
            {children}
        </Link>
    );
};

import { Link } from "@tanstack/react-router";
import clsx from "clsx";
import type { ComponentProps, ReactNode } from "react";

export const Anchor = ({
    className,
    children,
    ...props
}: ComponentProps<typeof Link> & {
    children: ReactNode;
    className?: string;
}) => {
    return (
        <Link
            className={clsx("hover:underline text-amber-700 font-medium", className)}
            {...props}
        >
            {children}
        </Link>
    );
};

TanStack•15mo ago•

4 replies

verbal-lime

Loosing type safety when wrapping <Link>

Anyone have an idea on how to keep type safety while wrapping <Link> in a generic component like so? Right now typescript allows me to provide invalid routes like so

<Link to="/invalid">

<Link to="/invalid">

and I don't like that I loose the type safety.

import { Link } from "@tanstack/react-router";
import clsx from "clsx";
import type { ComponentProps, ReactNode } from "react";

export const Anchor = ({
    className,
    children,
    ...props
}: ComponentProps<typeof Link> & {
    children: ReactNode;
    className?: string;
}) => {
    return (
        <Link
            className={clsx("hover:underline text-amber-700 font-medium", className)}
            {...props}
        >
            {children}
        </Link>
    );
};

import { Link } from "@tanstack/react-router";
import clsx from "clsx";
import type { ComponentProps, ReactNode } from "react";

export const Anchor = ({
    className,
    children,
    ...props
}: ComponentProps<typeof Link> & {
    children: ReactNode;
    className?: string;
}) => {
    return (
        <Link
            className={clsx("hover:underline text-amber-700 font-medium", className)}
            {...props}
        >
            {children}
        </Link>
    );
};

Loosing type safety when wrapping <Link>

Similar Threads

Loosing type safety when wrapping <Link>

Similar Threads

Similar Threads

Similar Threads