T
TanStack•15mo ago
correct-apricot

custom link with createLink doesnt render the Link component

I'm trying to create a custom Link wrapper. 
import { createLink } from "@tanstack/react-router";
import { FC, ReactNode } from "react";

type Props = {
  label: string;
  icon?: ReactNode;
};

const Component: FC<Props> = ({ label, icon }) => {
  return (
    <div className="group flex cursor-pointer items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
      <div
        className="mr-3 size-5 text-gray-400 group-hover:text-gray-500"
        aria-hidden="true"
      >
        {icon}
      </div>

      {label}
    </div>
  );
};
const TailwindDropdownLink = createLink(Component);

export default TailwindDropdownLink;
import { createLink } from "@tanstack/react-router";
import { FC, ReactNode } from "react";

type Props = {
  label: string;
  icon?: ReactNode;
};

const Component: FC<Props> = ({ label, icon }) => {
  return (
    <div className="group flex cursor-pointer items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
      <div
        className="mr-3 size-5 text-gray-400 group-hover:text-gray-500"
        aria-hidden="true"
      >
        {icon}
      </div>

      {label}
    </div>
  );
};
const TailwindDropdownLink = createLink(Component);

export default TailwindDropdownLink;
Gives perfect intellisense for the route when I'm using it, but It only renders the custom children provided and no actual Link around it, how could I fix that? what am i doing wrong?
4 Replies
like-gold
like-gold•15mo ago
please provide a minimal complete example by forking on of the existing examples on stackblitz
correct-apricot
correct-apricotOP•15mo ago
Yes of course! https://stackblitz.com/edit/tanstack-router-q4yrif?file=src%2Froutes%2Findex.tsx
gergelykisshun
StackBlitz
Router Basic File Based Example (forked) - StackBlitz
Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz
like-gold
like-gold•15mo ago
If you want to use your own component, you also need need to render the "link" yourself it could be a <button>, or and <a>... it's totally up to you what you get via createLink is a typesafe wrapper around your component
correct-apricot
correct-apricotOP•15mo ago
thank you for the help! Added a Link component to wrap my custom content, and passed the generated href to it. works fine and generates safe Link

Did you find this page helpful?