← All Docs

Building Apps

Multi-Page Apps

Most real-world apps and websites need more than one page. Webase makes it easy to create multi-page applications where each page has its own route, content, and purpose — all connected through seamless navigation.

Pages are routes. Each page you create in Webase becomes a route in your React app. Users navigate between pages using links and menus, just like a traditional website.

How Pages Work

In Webase, every page is a route in your generated React application. When you create a page with the route /about, it becomes accessible at #/about in your app's preview. The home page lives at the root route #/.

Behind the scenes, Webase uses HashRouter from React Router to handle navigation. This means all routes use a hash (#) prefix, which works reliably in iframe previews and on static hosting without any server configuration.

Creating a New Page

1

Open Your App in the Editor

Navigate to your app in the Application Editor. You can create pages by asking the AI in the Chat panel or by adding them through the Pages section.

2

Add a Page

To add a page via chat, simply ask: "Add an About page with our company story and team bios." The AI will create the page component, set up the route, and add navigation links automatically.

You can also add pages manually by creating the route and component files in the Code tab.

3

Configure Page Properties

Each page has several properties you can set:

  • Title — The display name shown in navigation menus and browser tabs.
  • Route — The URL path for the page (e.g., /about, /contact, /pricing).
  • Meta title — The SEO-friendly title for search engines.
  • Meta description — A short description for search engine results.
  • Position — The order in which the page appears in navigation.
  • Status — Whether the page is published (visible) or in draft (hidden).

Navigation Between Pages

When you create multiple pages, the AI automatically generates navigation components — typically a header menu or sidebar — that link all your pages together. Navigation uses React Router's Link component with hash-based routes, so transitions are instant without full page reloads.

You can customize the navigation by asking the AI: "Move the Contact page to the end of the navigation" or "Add a dropdown menu for the services pages."

Publishing and Draft Pages

Pages can be in one of two states:

  • Published — The page is live and visible to anyone viewing your app. It appears in navigation menus and is accessible via its route.
  • Draft — The page exists in your app's code but is hidden from visitors. It won't appear in navigation or be accessible by URL. This is useful for pages you're still working on.

Tip: Use draft status to prepare new pages before making them visible. When you're happy with a draft page, switch it to published and save your app to make it live.

Example: Building a Multi-Page Website

Let's build a small business website with three pages:

  1. Home (route: /) — Hero banner, feature highlights, and a call-to-action button.
  2. About (route: /about) — Company story, mission statement, and team member bios with photos.
  3. Contact (route: /contact) — Contact form with name, email, and message fields, plus a map and business hours.

Start by describing your app: "Create a business website for a coffee shop with a Home page showing our menu highlights, an About page with our story, and a Contact page with a form and our location." The AI generates all three pages with navigation, consistent styling, and working links between them.

Refine individual pages with follow-up messages like "Add a photo gallery to the About page" or "Include business hours on the Contact page."

Next Steps