routesExample.tsx

/**
 * Updates the RouteStore with static routes.
 */
export function setStaticRoutes ({state, apiClient}: AppContextProps) {
  state.routes.setRoot(() => ({
    // Require locale url prefix
    path: `:locale<${localeRegexString}>`,
    populate: () => state.i18n.availableLocales,

    // Always render the Layout
    component: Layout,

    children: [
      // Public routes are available on ocast.com
      state.origin.isPublic && {
        children: [
          {component: PublicLanding},
          {path: 'pricing', component: PublicPricing, layout: () => RouteLayout.Top},
          {path: 'browse', ...createBrowseRoute(state, apiClient), layout: () => RouteLayout.Top},
          ...createUserAccountRoutes(state)
        ]
      },

      // Whitelabel routes are available via ad portal
      state.origin.isPortal && {
        ...(() => {
          // Use the media kit color and logo
          const resource = apiClient.getMediaKits({ad_portal_host: state.origin.hostname});
          const kit = resource.value.data && resource.value.data[0];
          return {
            layoutBackColor: kit && kit.color,
            layoutLogoUrl: kit && kit.logoUrl
          };
        })(),
        children: [
          ...createUserAccountRoutes(state, false),
          createMediaKitRoute(false, state, apiClient)
        ]
      },

      // Dashboard routes are always available
      {
        ...requireAuth(state),
        path: 'dashboard',
        component: DashboardBehavior,
        layout: () => RouteLayout.Menu,
        children: [
          {component: DashboardOverview},
          {path: 'browse', ...createBrowseRoute(state, apiClient)},
          {path: 'mediakits', ...createBrowseRoute(state, apiClient, {create: true})},
          {path: 'preferences', component: OrganisationPreferences},
          {path: 'team', component: OrganisationTeam},
          {path: 'billing', component: () => <span>Billing</span>}
        ]
      },

      // Library routes are always available
      {
        ...requireAuth(state),
        path: 'library',
        children: [
          {path: 'organisation', children: [
            {path: 'roles', component: OrganisationRoles},
            {path: 'members', children: [
              {component: OrganisationMembers},
              {path: 'invite', component: InviteFindUser},
              {path: 'invite/new', component: InviteNewUser},
              {path: 'invite/send', component: InviteSend},
              {path: 'changeRole/:userId', component: OrganisationChangeRole}
            ]},
          ]}
        ]
      },

      // Development routes
      buildOptions.devTools && {
        path: 'dev',
        layout: () => RouteLayout.Menu,
        children: [
          {component: DevTools},
          {path: 'theme', component: DevTheme},
          {path: 'typography', component: DevTypography},
          {path: 'sitemap', component: DevSitemap},
          {path: 'i18n', component: DevI18n},
          {path: 'overflow', component: DevOverflow},
          {path: 'appState', component: DevAppState},
          {
            path: 'ui-components',
            pathToFirstChild: true,
            children: componentDemos.map((demo) => ({
              path: demo.name,
              label: demo.name,
              component: () => <Page>{demo.render()}</Page>
            }))
          }
        ]
      }
    ]
  }));

  state.routes.setFallback({
    meta: {index: false},
    component: PublicNotFound
  });
}