Defining Routes

Routes are defined in src/js/routes/index.js file and exported, Catalyst uses react-router-v6 based routing, so routes have to be defined accordingly.

For data fetching inside each routes, clientFetcher and serverFetcher functions have to be defined, they are explained in Data Fetching.

Note: Slash should not be prefixed while defining child route. For example: "prescription/new"

Interactive Routing Demo

Try the interactive demo below to see how different routes work in Catalyst:

Dynamic Routing Examples

This example demonstrates Catalyst's routing capabilities including dynamic parameters and navigation.

Route Navigation

Current Route

Path: /

Component: HomePage

Component Content

Welcome to Home Page

This is the main landing page of our application.

Code Example

Route Definition (src/js/routes/index.js)

const routes = [
  {
    path: "/",
    index: true,
    component: "HomePage",
  },
  {
    path: "/products",
    component: "Products",
  },
  {
    path: "/user/:id",
    component: "UserPage",
  },
  {
    path: "/about",
    component: "About",
  },
]

Route Configuration

// src/js/routes/index.js
import { createBrowserRouter } from '@tata1mg/router'
import HomePage from '../pages/Home'
import About from '../pages/About'
import Products from '../pages/Products'
import UserPage from '../pages/User'

const routes = [
  {
    path: "/",
    index: true,
    element: <HomePage />
  },
  {
    path: "/products",
    element: <Products />
  },
  {
    path: "/user/:id",
    element: <UserPage />
  },
  {
    path: "/about",
    element: <About />
  }
]

export default routes