Wasp-lang•6mo ago

Adding New Page

Hi, I'm new into fullstack. I want to add a new custom page that can be navigated from nvaigation bar at top (Features, Pricing, ...). Not sure what's the correct way or is it as simple as adding a file "XPage" under app folder? I searched for a tutorial page but could not find it so far. Appreciate the help.

2 Replies

kapa.ai•6mo ago

Hi @PM10. 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 new page in Wasp by creating a new set of page and route declarations. Here's how you can do it: 1. Create a new file for your page component under the src directory. For example, if you want to create a FeaturesPage, you can create a new file FeaturesPage.jsx under src. 2. In your new file, define your page component. Here's a simple example:

export const FeaturesPage = () => {  
 return <div>Welcome to the Features Page!</div>  
}

export const FeaturesPage = () => {  
 return <div>Welcome to the Features Page!</div>  
}

3. In your main.wasp file, add a new page and route declaration for your FeaturesPage:

page FeaturesPage {  
 component: import { FeaturesPage } from "@src/FeaturesPage"  
}  

route FeaturesRoute { path: "/features", to: FeaturesPage }

page FeaturesPage {  
 component: import { FeaturesPage } from "@src/FeaturesPage"  
}  

route FeaturesRoute { path: "/features", to: FeaturesPage }

Now, when a user visits /features, Wasp will render the FeaturesPage component. To add a link to this page in your navigation bar, you would need to modify your navigation component (usually found in src/components) and add a new link to /features. For more details, you can refer to the Wasp tutorial on adding a second page (https://wasp-lang.dev/docs/tutorial/pages#adding-a-second-page). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @PM10, 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•6mo ago

Kapa did agood job here, but here are also docs https://wasp-lang.dev/docs, and there is a piece in tutorial about routes and pages https://wasp-lang.dev/docs/tutorial/pages

3. Pages & Routes | Wasp

In the default main.wasp file created by wasp new, there is a page and a route declaration:

Gaming

Programming

Adding New Page