Anyone using Remix? Having trouble trying to set an as prop on a Link

Developer Support
21

I tried doing the as on the root prop, the repo/stackblitz is updated. I did this on the services link, however, it doesn’t seem to apply the as there.

22

I removed the link prop when passing to usebehavior, to demonstrate that it stays a button. When I keep the link prop, it makes it an a like it should, but the Link behavior is still missing - no client side rendering or prefetching.

23 
function ButtonLink_(props: ButtonProps, ref: ButtonRef) {
  const { link, ...rest } = props;
  const { plasmicProps } = PlasmicButton.useBehavior<ButtonProps>(rest, ref);
  return (
    <PlasmicButton {...plasmicProps} root={{ as: Link, props: { to: link } }} />
  );
}
24 
const HomepageOne = (
  { toggle, ...rest }: HomepageProps,
  ref: HTMLElementRefOf<"div">
) => {
  return (
    <PlasmicHomepage
      root={{ ref }}
      {...rest}
      logo={{
        onClick: toggle,
      }}
      services={{
        as: ButtonLink,
        props: { link: "/services" },
        // as: Link,
        // props: {
        //   to: "/services",
        //   prefetch: "intent",
        // },
      }}
25

It looks correct now - but the as doesn’t seem to be applying

Screen Shot 2022-05-17 at 07.42.08 .png
Screen Shot 2022-05-17 at 07.42.08 .png2394×460 21.4 KB

26

Try this (I cannot seem to fork that stackblitz for some reason):

In Homepage.tsx, we only ever render HomepageTwo.

In Button.tsx, put in this - I had to use render rather than as to remove the href prop for the remix Link to fully route client-side (if you leave an href in there it will still go back to the server, and the Button component’s default behavior is to add the href if present):

function Button_(props: ButtonProps, ref: ButtonRef) {
  const { plasmicProps } = PlasmicButton.useBehavior<ButtonProps>(props, ref);
  return (
    <PlasmicButton
      {...plasmicProps}
      root={{
        render: (rootProps, Comp) => {
          return <Link {...rootProps} to={props.link} />;
        },
      }}
    />
  );
}
27

One more thing - you can just set the link prop from within the studio as well, in that case you don’t need to specify any of the link props in code, you can just render a <PlasmicHomepage root={ref} {...rest}/>

28

Oh, on homepage.tsx I passed a toggle to the logo, if you click on the logo it will change.

29

The render works!!!

30

Thanks @yang

31

2022-05-17 11.35.14.gif

32

In the gif - I’m showing the network tab and hovering the buttons to see the prefetch in action, then later I click on them (notes for others that end up in this thread some day).

33

Here is what my button looks like in the above
`

``
34 
function ButtonLink_(props: ButtonProps, ref: ButtonRef) {
  const { plasmicProps } = PlasmicButton.useBehavior<ButtonProps>(props, ref);
  return (
    <PlasmicButton
      {...plasmicProps}
      root={{
        render: ({ children, ...rest }, Comp) => (
          <Link {...(rest as any)} to={props.link || ""} prefetch="intent">
            {children}
          </Link>
        ),
      }}
    />
  );
}
35 
<PlasmicHomepage
      root={{ ref }}
      {...rest}
      logo={{
        onClick: toggle,
      }}
      services={{
        as: ButtonLink,
        props: { link: "/services" },
        // as: Link,
        // props: {
        //   to: "/services",
        //   prefetch: "intent",
        // },
      }}