---

Tip

We would appreciate any feedback on our tutorial guide. If you are stuck at any time, please reach out on our GitHub Discussions boardopens in a new window.

---

Before starting, complete Workplace Setup and follow one setup path from Getting Started.

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-pageopens in a new window.

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';
import { Stack } from '@uhg-abyss/web/ui/Stack';
import { Text } from '@uhg-abyss/web/ui/Text';

Insert the following into your Card component. The Stack component lays the items out vertically, and align="flex-start" keeps each one at its own width rather than stretching it across the card:

<Card>
  <Stack gap="$web.semantic.spacing.scale.sm" align="flex-start">
    <Text>Hello tutorial - We did it!</Text>
    <Link href="http://localhost:3000/new-page">Go to New Page</Link>
    <Button href="http://localhost:3000/new-page">Go to New Page</Button>
  </Stack>
</Card>

In your browser, go back to http://localhost:3000opens in a new window, and your page should look like this:

Great job, you have successfully completed page routing!