Routing

Helium utilizes a file-based routing system which means you define all routes for your Helium app in the /pages directory. The Helium Framework's job is to replace pages in Thought Industries with your own code and functionality.

Replacing an Existing Page

Taking control of a page in Helium is as simple as defining a new file-path in the pages directory. Create a new folder underneath the pages directory with the name of the route you want to replace, then create a file named index.page.tsx.

• Dashboard: /pages/learn/dashboard.page.tsx
• Catalog: /pages/catalog/index.page.tsx
• Homepage: /pages/index/index.page.tsx

Creating a New Page

Create new pages for your instance by adding a new folder named the new route in the pages folder with an index.page.tsx. You can also create other files with the naming convention [otherName].page.tsx.

• New /test route: /pages/test/index.page.tsx
• Sub-route under catalog: /pages/catalog/test-catalog.page.tsx

Replacing Multiple Pages at Once

For pages that act more like templates (e.g., course details), a single file can control the layout for multiple/all courses using dynamic route parameters.

1. In the pages/courses directory, create a file named @courseSlug.page.tsx

2. Add 'routeParams' to passToClient in render/_default.page.server.tsx:

export const passToClient = [
  ...,
  'isProduction',
  'queryParams',
  'authToken',
  'routeParams'
];

3. Reference the courseSlug param:

import React from 'react';
import { usePageContext } from '../../renderer/usePageContext';

function Page() {
  const { routeParams } = usePageContext();
  return (
    <>
      <h1>Welcome to {routeParams.courseSlug}</h1>
    </>
  );
}

export { Page };

More information on route strings: vike.dev/route-string

Creating a Catch-All Route

Catch-all routes replace the classic 404 error page. Create a file named *.page.tsx in a pages directory (e.g., pages/courses/*.page.tsx). This page will be shown when the user visits any unmatched route under that path.