---

Note:
We would appreciate any feedback on our tutorial guide. If you are stuck at any time, make sure to contact the Abyss Admiral assigned to your team. If they cannot help, send a help request on our Contact Page.

---

Before starting, be sure to complete the Create Abyss App tutorial.

Step 1: Create A New Page

In Visual Studio Code, open my-new-app project. From here, navigate into products/web/src/routes, and create a new folder, name "NewPage". Within this new folder, we'll be creating two new files, named "index.ts" and "NewPage.tsx".

└── products
    └── web
        ├── src
        |   ├── routes
        |   |   ├── Home
        |   |   ├── NewPage
        |   |   |   ├── index.ts
        |   |   |   └── NewPage.tsx
        |   ├── browser.tsx
        |   └── document.tsx
        └── package.json

Step 2: Add a Component to your New Page

In NewPage.tsx, insert the following code:

// Import Header enables us to use headers in our program
import { Header } from '@uhg-abyss/web/ui/Header';

// Export const allows us to use NewPage outside of the file (as an import somewhere else)
export const NewPage = () => {
  return (
    <Header.Container>
      <Header.Brandmark />
    </Header.Container>
  );
};

In index.ts, insert the following export command:

// Export NewPage allows us to import and use NewPage in Routes
export { NewPage } from './NewPage';

Export NewPage allows us to import and use NewPage in Routes

Step 3: Connecting a Page to the Router

Now, in order to run and access our page, we need to connect to the router.

In src/routes/Routes.tsx, insert the following import command:

import { NewPage } from './NewPage';

In your Routes function, add the following route within your <Router.Routes> tag:

<Router.Route path="/new-page" element={<NewPage />} />

Note

Some routing will require parameters, below is an example of what this would look like:

<Route path=":handle" element={<Profile />} />

This example could be used for social media, here path "handle" would be a placeholder for an element "Profile". Path's URL for 'mySocialMedia' would look like the following:

mySocialMedia.com / handle;

Once the profile element receives a value, the URL would become:

mySocialMedia.com / myNewProfile;

Step 4: Accessing New Page

Open the page by navigating to http://localhost:3000/new-page.

Your page should look like this:

Step 5: Create a Link to New Page

Using the Link or Button components, you can navigate between your router's pages. Navigate to the src/routes/Home/Home.tsx file, then insert the following import statements:

import { Link } from '@uhg-abyss/web/ui/Link';

Insert the following Card.Section snippets at the bottom of your Card component:

<Card>
  <Card.Title>Hello tutorial</Card.Title>
  <Card.Section>We did it!</Card.Section>
  <Card.Section>
    <Link href="http://localhost:3000/new-page">Go to New Page</Link>
  </Card.Section>
  <Card.Section>
    <Button href="http://localhost:3000/new-page">Go to New Page</Button>
  </Card.Section>
</Card>

In your browser, go back to http://localhost:3000, and your page should look like this:

Great job, you have successfully completed page routing!