Routes Config #

The routes configuration defines URL patterns and their corresponding HTML templates for rendering content on a website. This setup is particularly useful in static site generators or server-side frameworks for managing dynamic routes. You can do this by adding objects to the routes array in the config file.

Structure of Routes #

Each route is represented as an object with the following properties:

Types of Routes #

1. Static Routes

   • This is a standard route where you enter the name of a specific category.
   • Example: /blog or /about.

2. Dynamic Routes

   • A dynamic route includes parameters that can change depending on the context (e.g., category, author, etc.).
   • Example: /blog/:category/, where :category is a dynamic parameter.
   • A route like /blog/web-development/ would resolve to /blog/category.html based on the dynamic parameter (web-development).

You can combine several dynamic parts in one route, for example, like this:

/blog/:category/:article/

Order of Routes #

If different types of routes are stored in the same array, pay special attention to the order of routers:

export const routes = [
    {
        route: '/blog/example/',
        index: '/blog/example.html'
    },
    {
        route: '/blog/:category/',
        index: '/blog/category.html'
    },
    {
        route: '/blog/authors/:author/',
        index: '/blog/author.html'
    },
    {
        route: '/blog/:category/:article/',
        index: '/blog/article.html'
    }
];

In case like above, order of routes is important. Because, route, for example, /blog/example/ match both /blog/example/ and '/blog/:category/'. That's why, standard routes must be above dynamic.