Custom Routes API

Turnkey

Embed-SDK React

Embed-SDK Web

Provides API to add custom pages into the App Builder.

customRoutes : CustomRoutesInterface[]

Accepts an array of CustomRoutesInterface objects, each specific to a route details

The overrides are applied by passing the array under the top-level customRoutes key to the Customization API config object.

CustomRoutesInterface

Key	Type	Description
path	string	Unique string for route path.
exact?	boolean	To validate route path
isPrivateRoute?	boolean	To validate authentication
failureRedirectTo?	string	Fallback route path
routeProps?	object	Route props
component	React.ComponentType	Custom Route React Component
componentProps?	any	Custom Route React Component Props

Use the example code given below showcasing how to add the custom routes into the App Builder.

turnkey

import { customize } from "customization-api";
import { customPage } from "./path-to-import-custom-page";
...

const customization = customize({
  customRoutes: [{
    path:'custom-page',
    exact:true,
    isPrivateRoute: false,
    component: CustomRoute,
    componentProps: {
      customData:"Custom Route"
    },
  }],
})

export default customization;

react-sdk

import { customEvents } from "@appbuilder/react";
import { customPage } from "./path-to-import-custom-page";
...

const customization = customize({
  customRoutes: [{
    path:'custom-page',
    exact:true,
    isPrivateRoute: false,
    component: CustomRoute,
    componentProps: {
      customData:"Custom Route"
    },
  }],
})

export default customization;

web-sdk

import { customEvents } from "@appbuilder/web";
import { customPage } from "./path-to-import-custom-page";
...

const customization = customize({
   customRoutes: [{
    path:'custom-page',
    exact:true,
    isPrivateRoute: false,
    component: CustomRoute,
    componentProps: {
      customData:"Custom Route"
    },
  }],
})

export default customization;