Wasp-lang•4mo ago

Link Components having typescript errors when linking to a path with a slug

When I try and use the "to" prop of a Link component, I get a typescript error on wasp start saying that it is not of the correct type if it contains a slug - eg profile/123 fails as the 123 is dynamic. What's the best way around this?

3 Replies

kapa.ai•4mo ago

Hi @CamBlackwood. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Wasp, when you're using the Link component to link to a path with a dynamic segment (also known as a slug), you need to provide the dynamic parts of the path via the params prop. The params prop is an object where keys are the names of the dynamic parts of the path and values are their actual values. For example, if you have a route defined in your main.wasp file like this:

route TaskRoute { path: "/task/:id", to: TaskPage }  
page TaskPage { ... }

route TaskRoute { path: "/task/:id", to: TaskPage }  
page TaskPage { ... }

And you want to link to a specific task with id 123, you would use the Link component like this:

import { Link } from 'wasp/client/router'  
  
export const TaskList = () => {  
 // ...  
  
 return (  
 <div>  
 {tasks.map((task) => (  
 <Link  
 key={task.id}  
 to="/task/:id"  
 params={{ id: task.id }}>  
 {task.description}  
 </Link>  
 ))}  
 </div>  
 )  
}

import { Link } from 'wasp/client/router'  
  
export const TaskList = () => {  
 // ...  
  
 return (  
 <div>  
 {tasks.map((task) => (  
 <Link  
 key={task.id}  
 to="/task/:id"  
 params={{ id: task.id }}>  
 {task.description}  
 </Link>  
 ))}  
 </div>  
 )  
}

In this example, the params prop is { id: task.id }, which provides the actual value for the :id part of the path. If you're still having issues, please make sure that the path you're providing to the to prop matches exactly the path you've defined in your main.wasp file, including the : before the name of the dynamic part of the path. For more information, you can check the Wasp documentation on type-safe links (https://wasp-lang.dev/docs/advanced/links). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @CamBlackwood, 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?

CamBlackwood•4mo ago

ah that makes sense, thanks bot 🫡

miho•4mo ago

Good bot 😊

Gaming

Programming

Link Components having typescript errors when linking to a path with a slug