W
Wasp•2w ago
Kbral

Not found page

how to develop a not found page?
1 Reply
kapa.ai
kapa.ai•2w ago
Hi @Kbral. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To develop a "Not Found" (404) page in Wasp, you can use a wildcard route. This feature allows you to catch any routes that are not explicitly defined in your application. Here's how you can implement it: 1. In your main.wasp file, add the following route and page declarations: 
route WildcardRoute { path: "*", to: WildcardPage }
page WildcardPage {
  component: import { WildcardPage } from "@src/Test"
}
route WildcardRoute { path: "*", to: WildcardPage }
page WildcardPage {
  component: import { WildcardPage } from "@src/Test"
}
2. Create a new file (e.g., Test.js or Test.tsx) in your src directory and implement the WildcardPage component. This component will serve as your "Not Found" page. 3. Make sure to place this wildcard route as the last route in your main.wasp file to ensure it only catches undefined routes. This approach will catch any undefined routes and render your custom "Not Found" page. It's worth noting that this feature was previously not available, but it has been implemented as confirmed by a Wasp team member in the Discord support thread. Remember that the specific design and content of your "Not Found" page are up to you to implement in the WildcardPage component. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Kbral, 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?

Did you find this page helpful?