How to wrap <Link /> in a styled component and sync the active state? And get typesafety

@Tanner Linsley saw somone asked you this here as well https://discord.com/channels/719702312431386674/1007702008448426065/1128108663819747490

I tried this implementation below. Not sure if this is the best way of doing this but not sure how to get type safety of the routes and apply active/inactive styling with the button wrapping the Link

any suggestions?

import { Link } from '@tanstack/react-router'

import { Button } from '../ui'

export type NavElementProps = {
    name: string
    icon: React.ReactNode
    route: string
}

export const NavElement: React.FC<NavElementProps> = ({
    name,
    route,
    icon,
}) => {
    return (
        <Button variant={'outline'}>
            {icon}
            <Link
                params={{}}
                search={{}}
                to={route}
                activeProps={{}}
                inactiveProps={{}}
            >
                {name}
            </Link>
        </Button>
    )
}

import { Link } from '@tanstack/react-router'

import { Button } from '../ui'

export type NavElementProps = {
    name: string
    icon: React.ReactNode
    route: string
}

export const NavElement: React.FC<NavElementProps> = ({
    name,
    route,
    icon,
}) => {
    return (
        <Button variant={'outline'}>
            {icon}
            <Link
                params={{}}
                search={{}}
                to={route}
                activeProps={{}}
                inactiveProps={{}}
            >
                {name}
            </Link>
        </Button>
    )
}

TanStack•3y ago•

7 replies

colossal-harlequin

How to wrap <Link /> in a styled component and sync the active state? And get typesafety

import { Link } from '@tanstack/react-router'

import { Button } from '../ui'

export type NavElementProps = {
    name: string
    icon: React.ReactNode
    route: string
}

export const NavElement: React.FC<NavElementProps> = ({
    name,
    route,
    icon,
}) => {
    return (
        <Button variant={'outline'}>
            {icon}
            <Link
                params={{}}
                search={{}}
                to={route}
                activeProps={{}}
                inactiveProps={{}}
            >
                {name}
            </Link>
        </Button>
    )
}

import { Link } from '@tanstack/react-router'

import { Button } from '../ui'

export type NavElementProps = {
    name: string
    icon: React.ReactNode
    route: string
}

export const NavElement: React.FC<NavElementProps> = ({
    name,
    route,
    icon,
}) => {
    return (
        <Button variant={'outline'}>
            {icon}
            <Link
                params={{}}
                search={{}}
                to={route}
                activeProps={{}}
                inactiveProps={{}}
            >
                {name}
            </Link>
        </Button>
    )
}

How to wrap <Link /> in a styled component and sync the active state? And get typesafety

Similar Threads

How to wrap <Link /> in a styled component and sync the active state? And get typesafety

Similar Threads

Similar Threads

Similar Threads