Lime Web Components API Documentation - v7.4.0
    Preparing search index...

    Interface RouteRegistry

    Service for registering and routing to web components

    The RouteRegistry enables URL-based routing to web components within the Lime platform.

    Register URL patterns mapped to component tag names, then navigate to those URLs using Navigator. The routing system will instantiate the component and pass URL parameters as props.

    A parameter such as /users/:userId is extracted and passed as a prop. A value that parses as a number arrives as a number, anything else stays a string.

    A limetype parameter builds a LimeWebComponentContext for the component. An id in the same path joins that context, and both are then removed from the props. An id without a limetype creates no context and stays an ordinary prop.

    The following property names are reserved by RouteComponent and cannot be used as path parameters:

    • platform - The platform instance
    • context - The component context
    • query - URL query parameters
    • hash - URL hash fragment
    • state - Navigation state
    • onTitleChanged - Handler bound to the RouteComponent.titleChanged event
    import { PlatformServiceName } from '@limetech/lime-web-components';

    const routeRegistry = platform.get(PlatformServiceName.RouteRegistry);
    const navigator = platform.get(PlatformServiceName.Navigator);

    routeRegistry.registerRoute('/users/:userId', 'user-profile');

    // Renders <user-profile userId={123} />
    navigator.navigate('/users/123');
    interface RouteRegistry {
        findComponent(path: string): MatchedComponent | undefined;
        registerRoute(pathPattern: string, component: string): void;
    }
    Index

    Methods

    findComponent registerRoute

    Methods

    • Find the component registered for a given path

      Matches the path against all registered route patterns and returns the component name and extracted parameters if a match is found.

      This is typically used internally by the platform routing system, but can be useful for testing or custom routing logic.

      Parameters

      • path: string

        The URL path to match (e.g., '/users/123')

      Returns MatchedComponent | undefined

      Matched component name and parameters, or undefined if no route matches

      import { PlatformServiceName } from '@limetech/lime-web-components';

      const routeRegistry = platform.get(PlatformServiceName.RouteRegistry);
      routeRegistry.registerRoute('/users/:userId', 'user-profile');

      const match = routeRegistry.findComponent('/users/123');

      // `undefined` when no registered pattern matches the path
      const componentName = match?.name;

      // 123, not '123'
      const userId = match?.props['userId'];

    • Register a component for a URL pattern

      Maps a URL path pattern to a web component tag name. When navigation occurs to a matching path, the component will be instantiated and rendered with URL parameters passed as props.

      The path pattern uses the URLPattern API syntax. Common patterns:

      • /static - Exact match
      • /users/:id - Named parameter
      • /files/:path* - Wildcard parameter
      • /admin/:section(users|roles) - Enum parameter

      Parameters

      • pathPattern: string

        URL path pattern using URLPattern syntax. See MDN URLPattern docs for pattern syntax details.

      • component: string

        Tag name of the web component to render for this route

      Returns void

      import { PlatformServiceName } from '@limetech/lime-web-components';

      const routeRegistry = platform.get(PlatformServiceName.RouteRegistry);

      // Exact match
      routeRegistry.registerRoute('/dashboard', 'app-dashboard');

      // Named parameters, passed to the component as props
      routeRegistry.registerRoute('/users/:userId', 'user-profile');
      routeRegistry.registerRoute(
          '/posts/:postId/comments/:commentId',
          'comment-view'
      );

      // Wildcard parameter
      routeRegistry.registerRoute('/files/:path*', 'file-browser');

      // Enum parameter
      routeRegistry.registerRoute('/admin/:section(users|roles)', 'admin-panel');

      // `limetype` and `id` together give the component a context
      routeRegistry.registerRoute('/object/:limetype/:id', 'object-viewer');

    Settings

    Member Visibility

    On This Page

    Reserved Property Names
    Methods