Dynamic Demo Routes for Components

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.

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

  

    

      Copied!
      

        

      
    
  
  
    
    
  


start
routes.ts

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.