extended-salmon

search prop is required in Link?

I got the TS error in the image but I did not expect that. Here is my code:

const routeConfig = createRouteConfig().createChildren((createRoute) => [
  createRoute({
    path: "/",
    component: () => {
      const [companyId, setCompanyId] = useState("");
      return (
        <>
          <input
            value={companyId}
            onChange={(event) => {
              setCompanyId(event.target.value);
            }}
          />
          <Link to={"/" + companyId}>Go to company</Link>
        </>
      );
    },
  }),
  createRoute({
    path: "/:companyId",
    component: () => {
      return <></>;
    },
  }),
]);

const routeConfig = createRouteConfig().createChildren((createRoute) => [
  createRoute({
    path: "/",
    component: () => {
      const [companyId, setCompanyId] = useState("");
      return (
        <>
          <input
            value={companyId}
            onChange={(event) => {
              setCompanyId(event.target.value);
            }}
          />
          <Link to={"/" + companyId}>Go to company</Link>
        </>
      );
    },
  }),
  createRoute({
    path: "/:companyId",
    component: () => {
      return <></>;
    },
  }),
]);

13 Replies

like-gold•4y ago

Also shouldn't that <Link be <Link to="/:companyId" params={{ companyId }}>? (I'm still learning this too)

afraid-scarlet•4y ago

This bug is fixed, but even still @Mark L is right, you need to use the route path /:companyId and params: { companyId }

extended-salmonOP•4y ago

What's the purpose of writing it like this <Link to="/:companyId" params={{ companyId }}> instead of this <Link to={"/" + companyId}>?

extended-salmonOP•4y ago

I tested this now but I can't get it to work:

afraid-scarlet•4y ago

Type safety and auto complete

extended-salmonOP•4y ago

Alright that's nice. I'm still struggling with this while knowing this is under beta. I think I've written it correctly looking at the kitchen sink example but I must be missing something though:

extended-salmonOP•4y ago

i'm also using the 4.9.3 version of TS so it cant be it

afraid-scarlet•4y ago

If companyId is just a string, you don’t need the parse and stringify options. Also, relative links need the “./path” prefix.

extended-salmonOP•4y ago

Ah yes I see now in the kitchen sink example. So in my case it should be:

<Link to="./$companyId" params={{ companyId: company._id }}>
                {company.name}
              </Link>

<Link to="./$companyId" params={{ companyId: company._id }}>
                {company.name}
              </Link>

I really wish I could say it solved it 😦

extended-salmonOP•4y ago

TS thinks the params type is this one which explains why TS doesn't want anything in params.

extended-salmonOP•4y ago

The link works and all, just a TS error.

afraid-scarlet•4y ago

If you’re doing relative links, use route.Link instead of the global export.

extended-salmonOP•4y ago

ohh that's freaky! Thanks 🙂

Gaming

Programming

search prop is required in Link?

Did you find this page helpful?