Skip to main content

Routing

Helium utilizes a file based routing system which means you define all routes for your Helium app in the /pages directory. We’ll walk through a couple of use cases. Examples of all these different use cases can found in this github repository.

Replacing an Existing Page​

It’s very easy to take control of existing pages in Helium. Simply create a new folder underneath the pages directory with the name of the route you want to replace, then create a file in that new directory named index.page.tsx. For example, if you wanted to replace the dashboard page, you would do that under /pages/dashboard/index.page.tsx

Creating a New Page​

In a similar fashion if you want to create a new route, simply create a new folder named the new route in the pages folder and create an index.page.tsx. You can also create other files under this folder with naming convention [otherName].page.tsx. For example, if you wanted to create a new route /test, you would do /pages/test/index.page.tsx

Replacing Multiple Pages at Once​

To avoid having to define a course details page for every course slug, a single file can be created which will control the layout of the course details page, which can then load in content dynamically.

  1. In the pages/courses directory, create a file named @courseSlug.page.tsx
  2. Add 'routeParams' to the end of passToClient in render/_default.page.server.tsx like so
export const passToClient = [
  ...,
  'isProduction',
  'queryParams',
  'authToken',
  'routeParams'
];
  1. You can then refrence the courseSlug param like so:
import React from 'react';
import { usePageContext } from '../../renderer/usePageContext';

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

export { Page };
  1. The contents of this file will now control all course detail pages of the Helium app, that do not already have a specific course detail page created.

Creating a Catch All Route​

Catch all routes are great for letting a user know they are probably somewhere they don’t want to be. A catch all route string can be used to replace the classic 404 error page, by providing the user with a little bit more information.

  1. To create a catch all route, create a new file in pages/courses named *.page/tsx
  2. The contents of this page will now be shown when the user visits courses/course-slug/a-page-that-doesn’t-exist.

Still have a question?​

Get your questions answered in our Developer Discord.