Next, we’re going to get our routes set up for all the different components we’re going to build throughout this series.

Defining the Dynamic Route

First, let’s navigate into our start/routes.ts file, and define a route for our component pages. These are the pages we’ll use to demo the various components we’ll be building and their styles and variants.

// start/routes.ts

Route.get('/components/:name', async ({ params, view }) => {
  return view.render(`pages/components/${params.name}`)
}).as('components')

In this route, :name is a route parameter that will allow us to specify the component name dynamically. It’ll then map to a page in our project, which we’ll define in a moment.