Wasp•6d ago

Routing to another page

Hi, I'm getting type errors when trying to route to another page. e.g. a profile/:id page. I am aware of this documentation: https://wasp-lang.dev/docs/advanced/links. But when I try to use <Link to="/profile/:id" params={{ id: creation.user.id }} className="text-blue-500 hover:underline" > {creation.user.username} </Link> -- i get this exact error: [ Wasp ] ext-src/featured-creations/FeaturedCreationsPage.tsx(129,15): error TS2820: Type '"/profile/:id"' is not assignable to type '"/" | "/login" | "/signup" | "/request-password-reset" | "/password-reset" | "/email-verification" | "/account" | "/demo-app" | "/admin-users" | "/pricing" | "/checkout" | ... 11 more ... | "/admin/messages"'. Did you mean '"/profile/:id?"'? -- i am using // Define the route for My Profile page route MyProfileRoute { path: "/profile/:id?", to: UserProfilePage } How can I fix this please?

3 Replies

kapa.ai•6d ago

Hi @ApexFossa45. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can help you with your routing issue in Wasp. The error you're encountering is related to type-safe links, which Wasp provides through its custom Link component. The issue appears to be that the to prop in your Link component doesn't match exactly with the route path you've defined. Let's break it down: 1. You've defined your route as:

route MyProfileRoute { path: "/profile/:id?", to: UserProfilePage }

route MyProfileRoute { path: "/profile/:id?", to: UserProfilePage }

2. But in your Link component, you're using:

<Link
  to="/profile/:id"
  params={{ id: creation.user.id }}
  className="text-blue-500 hover:underline"
>
  {creation.user.username}
</Link>

<Link
  to="/profile/:id"
  params={{ id: creation.user.id }}
  className="text-blue-500 hover:underline"
>
  {creation.user.username}
</Link>

The discrepancy is in the :id? vs :id. The ? in your route definition makes the id parameter optional, but your Link component is treating it as required. To fix this, you have two options: 1. If you want the id to be optional, keep your route as is and update your Link:

<Link
  to="/profile/:id?"
  params={{ id: creation.user.id }}
  className="text-blue-500 hover:underline"
>
  {creation.user.username}
</Link>

<Link
  to="/profile/:id?"
  params={{ id: creation.user.id }}
  className="text-blue-500 hover:underline"
>
  {creation.user.username}
</Link>

2. If you want the id to be required, update your route definition:

route MyProfileRoute { path: "/profile/:id", to: UserProfilePage }

route MyProfileRoute { path: "/profile/:id", to: UserProfilePage }

And keep your Link component as you have it. Additionally, for better type safety, you can use the routes object as described in the Type-Safe Links documentation (https://wasp-lang.dev/docs/advanced/links):

import { routes } from 'wasp/client/router'

// ...

<Link
  to={routes.MyProfileRoute.path}
  params={{ id: creation.user.id }}
  className="text-blue-500 hover:underline"
>
  {creation.user.username}
</Link>

import { routes } from 'wasp/client/router'

// ...

<Link
  to={routes.MyProfileRoute.path}
  params={{ id: creation.user.id }}
  className="text-blue-500 hover:underline"
>
  {creation.user.username}
</Link>

This approach ensures that your links always match your defined routes, providing better type safety and reducing the chance of errors. Remember, the to prop in the Link component must exactly match the path you've defined in your route declaration in the main.wasp file. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @ApexFossa45, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•6d ago

Yep, you have to pass in the exact string you used to define the route: "/profile/:id?" with the ? as well 🙂

ApexFossa45OP•2d ago

thank you! the bot is very handy :boi:

Gaming

Programming

Routing to another page