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

Module "components/UIRouter"

Index

Interfaces

Variables

Functions

Variables

Const UIRouterConsumer

UIRouterConsumer: ExoticComponent<ConsumerProps<UIRouter>> = UIRouterContext.Consumer
deprecated

use useRouter or React.useContext(UIRouterContext)

Const UIRouterContext

UIRouterContext: Context<UIRouter> = React.createContext<_UIRouter>(undefined)

This React Context component lets you access the UIRouter instance anywhere in the component tree

When using hooks, use useRouter instead.

Example:

<UIRouterContext.Consumer>
 {router => <MyComponent router={router} />}
</UIRouterContext.Consumer>

Functions

UIRouter

  • This is the root UIRouter component, needed for initialising the router and setting up configuration properly. Every other component from this library needs to be a descendant of <UIRouter>, so ideally you want to use it as root of your app.

    Config

    There are two ways to set up the router: you can either bootstrap it manually and pass the instance to the component, or pass the necessary information and let the component do it for you.

    Component Setup (suggested)

    Setting up the router via this component is pretty straightforward:

    const Home = () => <div>Home</div>;
    
    const states = [{
      name: 'home',
      component: Home,
      url: '/home'
    }];
    
    const plugins = [pushStateLocationPlugin];
    
    ReactDOM.render(
      <UIRouter plugins={plugins} states={states}>
        <UIView />
      </UIRouter>,
      document.getElementById('root'),
    );

    Optionally, you may want to access the router instance once to setup additional configuration, like registering TransitionHooks. To do so, you may pass a config function that will be called with the newly created router instance as argument:

    const config = router => {
      // register home state as the intial one
      router.urlService.rules.initial({ state: 'home' });
    }
    
    ReactDOM.render(
      <UIRouter plugins={plugins} states={states} config={config}>
        <UIView />
      </UIRouter>,
      document.getElementById('root'),
    );

    Manual Setup (advanced)

    Alternatively you may setup the router manually (i.e. extracting the router configuration to another file). You can do that by creating a new instance of the router and pass it to the component, this way the component will skip the previous props and just use the provided instance.

    NB: since you are manually bootstrapping the router, you must register the servicesPlugin as well as the location plugin of your choice (in this example the pushStateLocationPlugin).

    const router = new UIRouterReact();
    // activate plugins
    router.plugin(servicesPlugin);
    router.plugin(pushStateLocationPlugin);
    // register states
    router.stateRegistry.register(someState);
    // start the router
    router.start();
    
    ReactDOM.render(
      <UIRouter router={router}>
        <UIView />
      </UIRouter>,
      document.getElementById("root")
    );

    Parameters

    Returns Element

Generated using TypeDoc