How to use @uirouter/react - 8 common examples

export default function makeRouter() {
  const router = new UIRouterReact();
  router.plugin(servicesPlugin);
  router.plugin(hashLocationPlugin);

  // Debug visualizer
  if ($featureFlags.debugRouter) {
    // tslint:disable-next-line:no-require-imports
    router.plugin(require('@uirouter/visualizer').Visualizer);
    router.trace.enable('TRANSITION');
  }

  // Register the initial (eagerly loaded) states
  states.forEach((state) => router.stateRegistry.register(state));

  // Global config for router
  router.urlService.rules.initial({ state: 'default-account' });
  router.urlService.rules.otherwise({ state: 'default-account' });

const factory = (path: [PathNode], config: ReactViewDeclaration) =>
    new ReactViewConfig(path, config);

    const factory = (path: [PathNode], config: ReactViewDeclaration) => new ReactViewConfig(path, config);

import {
  pushStateLocationPlugin,
  UIRouterReact,
  UISref,
  UIView,
} from "@uirouter/react";
import { ConnectedUIRouter } from "@uirouter/redux/react";
import * as React from "react";
import { Provider } from "react-redux";

import createRoutedStore from "./redux/store";
import states from "./router/states";

const router = new UIRouterReact();
const store = createRoutedStore(router);

const App = () => (
  
    
      <div>
        <nav>
          <ul>
            
              <a>
                <li>home</li>
              </a></ul></nav></div>

*
 * When a @uirouter/react `` is rendered (from react code),
 * it renders first to an AngularJS `` component,
 * inside the `ui-view` is an AngularJS ``,
 * which finally renders a real @uirouter/react ``:
 *
 * 
 *   
 *     
 *       
 *     
 *   
 * 
 */

UIView.prototype.render = function() {
  if (this.props.wrap === false) {
    const id = `${this.$id}/${this.props['name']}`;
    debugLog('react', 'UIViewMonkeyPatch', id, '.render()', 'realRender.apply(this, arguments)');
    return realRender.apply(this, arguments);
  }

  return ;
};

import * as React from 'react';
import { UIView } from '@uirouter/react';
import { debugLog } from '../debug';
import { PortalView } from './PortalView';

const realRender = UIView.prototype.render;

/**
 * Monkey patches the @uirouter/react UIView such that:
 *
 * When a @uirouter/react `` is rendered (from react code),
 * it renders first to an AngularJS `` component,
 * inside the `ui-view` is an AngularJS ``,
 * which finally renders a real @uirouter/react ``:
 *
 * 
 *   
 *     
 *       
 *     
 *   
 * 

import * as React from 'react';
import { UIRouterConsumer, UIView, UIViewConsumer, UIViewProps } from '@uirouter/react';
import { UIRouterContextComponent } from './UIRouterReactContext';
import { debugLog } from '../debug';

const InternalUIView = UIView.__internalViewComponent;

export interface IReactUIViewProps extends UIViewProps {
  refFn: (ref: HTMLElement) => void;
}

export const ReactUIView = ({ refFn, ...props }: IReactUIViewProps) => {
  debugLog('react', 'ReactUIView', `?/${props['name']}`, '.render()', '');

  return (
    
      
        {router => (
          
            {parentUiView => (
              
            )}

const routerConfig = (router: UIRouterReact) => {
  router.urlRouter.otherwise('/home');
  trace.enable(1);
};