Route plugin

Routes

Plugins in Nocto can also define routes. It is another parameter which can be added to index.tsx.

Let's say you want to create a route as /sidebar-plugin, so when user will go to <your-app-url>.com/sidebar-plugin you would like to render a proper page. You can do this by creating index.tsx with following content:

import { ShoppingCart } from "@medusajs/icons"
import { RouteEntry } from "@rsc-labs/noctojs-plugin-system"


export const sidebarPlugin = {
  id: "sidebar-plugin",
  sidebar: {
    path: "/sidebar-route",
    label: "My sidebar item",
    icon: ShoppingCart
  },
  routes: (): RouteEntry[] => [
    {
      path: "/sidebar-route",
      layout: "main",
      handle: {
        breadcrumb: () => "Breadcrumb for sidebar route"
      },
      children: [
        {
          path: "",
          lazy: () => 
            import("./Example").then((mod) => ({
              Component: () => <mod.Slot1/>,
            })),
          layout: "main"
        },
      ],
    }
  ]
}

A lot of new parameters, but let's break it down:

• path - it defines the path of the route
• layout - there are 4 available layout now - main, settings, auth and public. They are just following what Medusa offers. Normally you will use main layout.
• handle: { breadcrumb } - this parameters is a function where you return the name which will appear on the top of the page (in top bar)
• children - here you are describing where the route shall led. You can see that we are lazy loading the component which will be then rendered.

The above example is fully working new sidebar item, so when user will click on it, then it will render Slot1 component from Example file.