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?

TanStack•2y ago•

7 replies

ordinary-sapphire

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?

custom link with createLink doesnt render the Link component

Similar Threads

custom link with createLink doesnt render the Link component

Similar Threads

Similar Threads

Similar Threads