Module "components/UIRouter"

UIRouter

• UIRouter(props: UIRouterProps): Element

• 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

  • props: UIRouterProps

  Returns Element