"components/UISref" | @uirouter/react
Options
All
  • Public
  • Public/Protected
  • All
Menu

Module "components/UISref"

Index

Interfaces

Functions

Functions

Const UISref

  • UISref(__namedParameters: { children: any; className: string; options: TransitionOptions; params: object; to: string }): DetailedReactHTMLElement<any, HTMLElement>
  • A component to links to router states

    If you are using functional components, consider using the useSref hook instead.

    This component creates links to router states, allowing the user to navigate through the application. It works well together with <a> and <button> nodes.

    You can wrap your anchor/button and define the router state you want it to link to via props. If the state has an associated URL, it will automatically generate and update the href attribute. Cliking its children will trigger a state transition with the optional parameters.

    Example:

    // state definition
    const state = {
      name: 'catalog',
      url: '/shop/catalog?productId',
      component: Catalog
    }
    
    // UISref component
    <UISref to="catalog" params=>
      <a>Product 103</a>
    </UISref>
    
    // rendered dom
    <a href="#/shop/catalog?productId=103">Product 103</a>

    It will also respect the default behavior when the user Cmd+Click / Ctrl+Click on the link by canceling the transition event and opening a new tab instead.

    Parameters

    • __namedParameters: { children: any; className: string; options: TransitionOptions; params: object; to: string }
      • children: any
      • className: string
      • options: TransitionOptions
      • params: object
      • to: string

    Returns DetailedReactHTMLElement<any, HTMLElement>

Generated using TypeDoc