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 [[TransitionHook]]s. 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)

Alternatevely you may setup the router manually (i.e. exctracting the router configuration to another file). You can do that by createing 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")
);

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.

The primary use-case is to simplify the special appearance of navigation menus relying on [[<UISref>]], by having the "active" state's menu button appear different, distinguishing it from the inactive menu items.

It will register every nested [[<UISref>]] and add the class to its child every time one of the states is active.

<UISrefActive class="active-item">
  <UISref to="homestate"><a class="menu-item">Home</a></UISref>
</UISrefActive>

// rendered when state is inactive
<a href="/path/to/homestate" class="menu-item">Home</a>

// rendered when state is active
<a href="/path/to/homestate" class="menu-item active-item">Home</a>