Wrap <Link /> and redirect

[frontsideair]

It would be nice if this library generated type-safe versions of <Link /> and redirect so we can use these safer ones instead of importing from Remix.

[sandulat]

Hey @frontsideair. Thank you for your proposal!

I think this would be out of the scope of this package.

Did you encounter any difficulties? The usage is actually very simple:

redirect(route("/my-route"));

<Link to={route("/my-route")} />

Besides that, you could have routes with dynamic params. So to implement your proposal, we'd need this sort of API:

import { redirect, Link } from "routes-gen";

redirect("/products/:id", { id: "123" });

<Link to="/products/:id" routeParams={{ id: "123" }} />

Which is an overkill IHMO.

Fewer abstractions are usually the best practice, and composition is the way to go.

[frontsideair]

Thanks for the reply.

I didn't experience any problems, it's just that using this is opt-in and there's nothing that protects you (or anyone contributing) from passing any string to Link and redirect. One could argue that you can still import these from Remix, but it'll be like someone using a div when there's a design system, possible but a little bit harder to do and easier to spot. (A similar approach is used in https://github.com/donavon/superjson-remix)

However you're right about the Link component API for routes with dynamic parameters, it looks a bit awkward to me too. (redirect looks okay to me.)

But I understand that my proposal doesn't align with the design goals and I can wrap these for my project.

[sandulat]

Yep, you could just wrap it into a small utility in your project. Small example:

import { redirect as remixRedirect } from "remix";
import { route } from "routes-gen";

export const redirect = (...args: Parameters<typeof route>) => remixRedirect(route(...args));

Though, using my example, you lose the second argument of the original redirect from Remix, for setting the response code. It can be improved.