Replies: 3 comments 18 replies
-
import Link, { LinkProps } from '@mui/material/Link';
import { AnyRoute, MakeLinkOptions, RegisteredRouter, Link as RouterLink } from '@tanstack/react-router';
type LinkRouterProps<TRouteTree extends AnyRoute = RegisteredRouter['routeTree'], TTo extends string = ''> =
MakeLinkOptions<TRouteTree, '/', TTo> & LinkProps;
export default function LinkRouter<TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],TTo extends string = ''>
(props:LinkRouterProps<TRouteTree, TTo>) {
return <Link {...props} component={RouterLink as any} />;
}
//Usage
<LinkRouter underline="hover" activeOptions={{ exact: true }} to={"/MyProfile"} sx={{ color: 'primary.contrastText' }}>
My Profile
</LinkRouter> |
Beta Was this translation helpful? Give feedback.
10 replies
-
Had a similar problem with import { Link, LinkOptions, RegisteredRouter } from '@tanstack/react-router';
import { Button, ButtonProps } from '@mui/joy';
type ButtonLinkProps<TTo extends string = ''> = LinkOptions<RegisteredRouter['routeTree'], '/', TTo> & ButtonProps;
export function ButtonLink<TTo extends string = ''>(props: ButtonLinkProps<TTo>) {
return <Button component={Link} {...props} />;
} |
Beta Was this translation helpful? Give feedback.
5 replies
-
Funny enough it seems it suffices just to wrap the component in import {Button} from "@mui/material"
import { createLink } from "@tanstack/react-router"
const RouterButton = createLink(Button) |
Beta Was this translation helpful? Give feedback.
3 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Route definition:
Working link using Router's component:
Working (but failing to type-check) link using MUI component:
Compile error:
StackOverflow question with more detail: https://stackoverflow.com/q/77074670/924597
GitHub repo: https://github.com/shorn/tater/blob/d8d6cc82d7079b820e8fc2d8be6015626683162a/src/Route/Home.tsx#L35
Beta Was this translation helpful? Give feedback.
All reactions