Wasp-lang•7mo ago

routing

I added this route to main.wasp, route QuizRoute { path: "/quiz/:id", to: QuizPage } page QuizPage { authRequired: true, component: import DemoAppPage from "@src/client/app/QuizPage" } When I try connecting to this route, I get an error, <Link to='/quiz/2'> I am getting this error, types.d.ts(13, 9): The expected type comes from property 'to' which is declared here on type 'IntrinsicAttributes & (Omit<LinkProps<unknown> & RefAttributes<HTMLAnchorElement>, "to"> & { search?: Record<...> | undefined; hash?: string | undefined; } & Routes)' (property) to: "/quiz/2"

3 Replies

kapa.ai•7mo ago

Hi @Keshawn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're trying to use Wasp's custom Link component to create a link to your QuizPage. However, the error message suggests that there might be a type mismatch with the to property. In Wasp, when you're using the Link component, you need to provide a valid path and pass in all the required params correctly. Here's an example from the Wasp documentation (https://wasp-lang.dev/docs/advanced/links):

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 your case, you should modify your Link component to look something like this:

<Link  
 to="/quiz/:id"  
 params={{ id: 2 }}>  
 Quiz 2
</Link>

<Link  
 to="/quiz/:id"  
 params={{ id: 2 }}>  
 Quiz 2
</Link>

This way, you're providing a valid path and correctly passing in the id parameter. If you're still encountering issues, please ensure that your QuizPage component is correctly defined and imported. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Keshawn, 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?

KeshawnOP•7mo ago

no worries, @kapa.ai , I got it resolved

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- That's great to hear! If you have any other questions or run into any more issues, feel free to ask. Happy coding with Wasp! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Keshawn, 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?

Gaming

Programming

routing