Route Config

There is a special file called route.config.js where you can specify your route configuration.

Shape of the route config


    type RouteKey = `/${string}`;

    type LoaderFile = `${string}.loader${".js" | ".ts" | ""}`;

    type Routes = {
      [key: RouteKey]: {
        group?: string;
        name?: string;
        page?: string;
        loader?: LoaderFile;
      };
    };

Let's look at a sample configuration and go through each property, to better understand what these mean.

 
    /**
    * Routes for your app
    * @type {import("cottonjs").Routes}
    */
    const routes = {
        "/": {
            name: "microwave",
            group: "kitchen appliances",
            page: "src/kitchen/Microwave.tsx",
            loader: "src/kitchen/Microwave.loader.ts",
        },
        "/refrigerator": {
            name: "refrigerator",
            group: "kitchen appliances",
            page: "src/kitchen/Refrigerator.tsx",
        },
    };

    export default routes;

key The value you pass for this property can be access through `CottonData`

This property must be unique and must begin with a "/". It represents a distinct route that users can visit.

name The value you pass for this property can be access through `CottonData`

Multiple routes can have same name. This property comes in handy when it comes to writing logic to highlight a visiting anchor tag in you website.

Below example show such usecase.


        <a href="/"
           className={
            route?.name == "microwave" ? "active" : ""
           }>
            Microwave Ovens
        </a>

group The value you pass for this property can be access through `CottonData`

This property lets you name a collection of routes with a name of your choice. You can use this property to check if a user is visiting a route that belongs to a group as below.


        <a
          href="/"
          className={route?.group == "kitchen appliances" ? "active" : ""}
        >
          Kitchen Appliances
        </a>

page

This is where you specify the .jsx or .tsx page you want to show when a user visits a route. You can either specify the file with or without the extension.

loader

This lets you pass data to your page. The file specified here is processed in the server and only the data you return will be available through CottonData. Learn more about this at loading page data.