Wasp-lang•2mo ago

Best way of adding a 404 page?

What's the optimum way of adding a 404 page to my wasp app - should I take the react router standard approach of a wildcard match as the last route listed?

3 Replies

kapa.ai•2mo 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: ---------------------- Yes, you can add a 404 page to your Wasp app by using a wildcard route as the last route listed. This approach is already possible in Wasp. Here is an example of how you can do it:

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"
}

This code will catch any routes that are not defined elsewhere in your app and redirect them to the WildcardPage. Remember to place this at the end of your routes in the main.wasp file to ensure that it only catches undefined routes. This information was discussed in a Discord support thread (https://discord.com/channels/686873244791210014/1112653557934592022). ---------------------- 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?

martinsos•2mo ago

Yup! @CamBlackwood did this go fine?

CamBlackwoodOP•2mo ago

yeah all good thanks @martinsos 🙂 I even opened a PR to add it to the open saas template Also I noticed it's not in the docs either, shall I add it? Or is it sufficient to signpost people to react router docs

Gaming

Programming

Best way of adding a 404 page?