Conditional Route

Conditional Routes render different routes based on conditions. This is useful for scenarios like showing different pages based on user authentication status or user preferences.

Schema Configuration

Sanity Schema

// In your feature descriptor
import { FeatureDescriptor } from '@vyuh/sanity-schema-core';
import { ConditionalRouteDescriptor } from '@vyuh/sanity-schema-system';

export const myFeature = new FeatureDescriptor({
  name: 'myFeature',
  title: 'My Feature',

  contents: [new ConditionalRouteDescriptor()],

  // Define custom conditions
  conditions: [myCustomCondition],
});

Content Structure

// Conditional Route object structure
interface ConditionalRoute {
  _type: 'vyuh.conditionalRoute';
  condition: {
    _type: 'vyuh.condition';
    configuration: {
      _type: string;
      // Condition-specific properties
    };
  };
  cases: {
    value: string;
    item: {
      _ref: string; // Reference to a route document
    };
  }[];
  defaultCase?: string;
}

Note

When adding custom layouts to a content block, always make sure to include them in the corresponding descriptor’s layouts property as shown in the schema configuration example above.

Extensibility

Schema Descriptors

The ConditionalRouteDescriptor in the schema system provides the following extensibility points:

• routes: Define which route types can be used in conditional cases

Additionally, at the feature level (same as regular conditional content):

• conditions: Register custom condition types that can be used for decision logic

// Schema-side descriptor
new ConditionalRouteDescriptor({
  routes: [{ type: 'vyuh.route' }]
})

// Feature-level conditions registration
new FeatureDescriptor({
  conditions: [userSubscriptionCondition, deviceTypeCondition]
})

React Descriptors

In the React system, conditional route content is configured using the ConditionalRouteDescriptor:

// React-side registration
import { ConditionalRouteDescriptor } from '@vyuh/react-feature-system';
import { ContentExtensionDescriptor } from '@vyuh/react-extension-content';
import { FeatureDescriptor } from '@vyuh/react-core';

new FeatureDescriptor({
  name: 'myFeature',
  extensions: [
    new ContentExtensionDescriptor({
      contents: [
        new ConditionalRouteDescriptor(),
      ],
    }),
  ],
});