GithubHelp home page GithubHelp logo

ui-router / react Goto Github PK

View Code? Open in 1sVSCode Editor NEW
426.0 13.0 90.0 5.39 MB

🔼 UI-Router for React

Home Page:

License: MIT License

TypeScript 98.75% JavaScript 1.25%
react ui-router typescript javascript router spa state-machine

react's Introduction


Greenkeeper badge

UI-Router provides extremely flexible, state based routing to the React ecosystem.

Routing frameworks for SPAs update the browser's URL as the user navigates through the app. Conversely, this allows changes to the browser's URL to drive navigation through the app, thus allowing the user to create a bookmark to a location deep within the SPA.

UI-Router applications are modeled as a hierarchical tree of states. UI-Router provides a state machine to manage the transitions between those application states in a transaction-like manner.

Docs & Resources

Getting started

The UI-Router package is distributed using npm, the node package manager.

yarn add @uirouter/react

Import UIRouter into your project, define some states and you're good to go!

import React from 'react';
import ReactDOM from 'react-dom';
import { UIRouter, UIView, pushStateLocationPlugin } from '@uirouter/react';
import Home from './components/Home';

// define your states
const states = [
    name: 'home',
    url: '/home',
    component: Home,

// select your plugins
const plugins = [pushStateLocationPlugin];

  <UIRouter plugins={plugins} states={states}>
    <UIView />

react's People


dependabot-preview[bot] avatar christopherthielen avatar elboman avatar dependabot[bot] avatar greenkeeper[bot] avatar greenkeeperio-bot avatar Kukkimonsuta avatar sisisin avatar wallzero avatar Anber avatar wms avatar alexbaumgertner avatar AmbientLighter avatar felixmosh avatar uirouterbot avatar


灰太狼的大智慧 avatar kin avatar Eva1ent avatar Nidheesh avatar Kaleb Fergin avatar Nikolay Solovyov avatar Meghraj avatar  avatar Hima Dionysus Balde avatar Kimm avatar  avatar Jacky avatar Davide Briscese avatar Muriel avatar AlphaTr avatar Andrea avatar Chanhee Jang avatar Suyan avatar Jingsong Gao avatar 锂电 avatar Hao avatar Janry avatar Sinker avatar kamei avatar Jakub Biesiada avatar  avatar Anand avatar Edgar Julio Chahuin Auccafuro avatar Mr Crypster avatar Franck Chan avatar KimSeonghyeon avatar Đamien avatar dhruw lalan avatar MOZGIII avatar RFoncier avatar Vanessa Bertoletti avatar Sudhakar B avatar Fredy Mendez avatar Ayan Nauryzbayev avatar  avatar AnnieYoung avatar Xuan Quang avatar chris avatar Roman Hossain Shaon avatar Alan Grosskurth avatar - Büşra - avatar Benjamin Schandera avatar lijian avatar Carlos José Salas avatar Roberto avatar  avatar Joe Seifi avatar  avatar Muhammad Zakir Ramadhan avatar Artur Bień avatar Alex Castlenine avatar Roman Rudnev avatar Artem Verbat avatar  avatar Viktor Mirieiev avatar  avatar Nathan Hutchision avatar Miguel Correa avatar Hannes Olszewski avatar Pratik Lunagaria avatar Camilo avatar Xuany avatar 愤怒的倒霉熊 avatar Float avatar Joonha avatar Pavel Erokhin avatar Vinicius avatar Nat avatar Richard Clayton avatar  avatar Theofanis Despoudis avatar Helmar Bachle avatar CasseyCola avatar Yarik Leto avatar Álvaro García León avatar Alex White avatar  avatar x0rzkov avatar Maziar Barzi avatar Tommy avatar Frederik Reich avatar Arif Hanif avatar Josh avatar danielsdesk avatar Ashley Donald avatar Jon Hartling avatar Erik Henrique avatar Ruchir Chawdhry avatar M. Hamza Rajput avatar bonon avatar Vladimir Ugryumov avatar Egor Zhivagin avatar Andreev Danila avatar Griff avatar Max Tarsis avatar


send2vinnie avatar James Cloos avatar kim monzon avatar Wesley Cho avatar Chris Thielen avatar Marco Botto avatar  avatar JY. LIN avatar rizki avatar yahone avatar Lukasz Szymanski avatar LiYang avatar Kimo avatar

react's Issues

v0.2.3: UMD build doesn't work

The UMD build looks for window.react instead of window.React as external library.
Also the lib is exported as window.ui-router-react and should be window.UIRouterReact instead.

Redux integration

I'd like to discuss a bit what could be a great Redux integration with UI-Router.

NB: There is nothing preventing you from using Redux in combination with the router right now, as you can simply connect() your "state component" and that's it.

There are some features that I think might be useful:

  • sync the url location in the redux store whenever changes
  • trigger navigation via redux actions

I'm not a time-travel user so I honestly don't know how many people rely on it but I think it could be supported if it makes sense.

Let me know what you have in mind 😉

UIView Pass Props & Propogate Changes To Children


It doesn't seem that props from UIView are passed on to the children except for a select few. Furthermore, the props that are passed are never updated in the children of UIView after they change. I request that properties propogate from UIView into their children and those children receive updates.

I am trying to create a reusable component that prepopulates ui-router states. For example, given an array of tabs and an array of drawers, generate the routes, views, with relative and absolute naming. This component would be an easy starting point for new users to ui-router and enable early complex routing.

Currently this is working but the component requires context and a state manager like Redux to get props to children of UIView and have changes propagate. For the component to be reusable, it'd be best if a state manager wasn't included and React component state was used instead.

I tried using context alone but context changes don't propogate. I am going to play with using callbacks in my context instead, but the cleaner and easier solution would be if UIView passed props and propogated changes to child components.


Issue with UISrefActive in 0.4.0

We are having trouble getting the UISrefActive to work in 0.4.0 because it's indicating class is not being supplied. We've marked it up the following ways:

<UISrefActive class={'active'}>
    <UISref to={UrlName}>


<UISrefActive class="active">
    <UISref to={UrlName}>

Both of them end up with this error:

Warning: Failed prop type: The prop `class` is marked as required in `UISrefActive`, but its value is `undefined`.
    in UISrefActive
    in Unknown (created by Unknown)
    in div (created by Unknown)
    in Unknown (created by AppModulesContainer)
    in div (created by AppModulesContainer)
    in div (created by AppModulesContainer)
    in AppModulesContainer (created by Connect(AppModulesContainer))
    in Connect(AppModulesContainer) (created by Reporting)
    in div (created by Reporting)
    in div (created by Reporting)
    in div (created by Reporting)
    in div (created by Reporting)
    in div (created by Reporting)
    in div (created by Reporting)
    in div (created by Reporting)
    in div (created by Reporting)
    in div (created by Reporting)
    in div (created by Reporting)
    in Reporting
    in UIRouter
    in Provider

What have we done wrong?

Add `react` as peer dependency

So that user get's notified about missing dependency during npm install. It is unlikely someone will install this without react, but you never know.. :)

Redirect to page

how to redirect to home page when enter index app . just like this : to
when i directly enter . every thing working good .
I just read docs ( i'm using "@uirouter/react": "^0.5.0" now ) and can not resolve this problem .

// app state
const appState = {
name: 'app',
redirectTo: 'app.home',
//redirectTo: 'home',
component: App

// home state
const homeStates = {
parent: 'app',
name: 'home',
url: '/home',
component: Home

thanks !

ui-router-react fails with Rollup

When attempting to bundle a React app that uses ui-router-react I get a zillion complaints from Rollup along the lines of

Error: Cannot call a namespace ('classNames')

Based on similar errors I see documented for Rollup...

When importing a module's namespace using * as foo you get a namespace object which isn't callable. You should import default export instead. 

import express from 'express';

const app = express();

v0.5.0 release/roadmap

Is there anything I can do to speed up release of build compatible with ui-router-core 5.0.0?

@uirouter/react WARNING in ./~/@uirouter/core/lib/vanilla/*.js


I am trying to implement ui-router into my react/typescript application (bundling with webpack). I am getting warnings during the bundle on missing *.ts files.

For example:
WARNING in ./~/@uirouter/core/lib/hooks/ignoredTransition.js (Emitted value instead of an instance of Error) Cannot find source file '../../src/hooks/ignoredTransition.ts': Error: Can't resolve '../../src/hooks/ignoredTransition.ts'

I check the node_modules and I do not see the ts files in path. Is there something that I am missing?

Thank you.

[typescript] How to import Transition model?

Is there a way of using Transition model to define a type in Typescript code? Would be nice if something like this was possible:

import {Transition} from 'ui-router-react'

// ...

// resolve object in state definition
  token: 'someToken',
  resolveFn: async (transition: Transition) => {
    // ...       
  deps: ['$transition$']

Simplify/merge `UISref` and `UISrefActive`

I believe the current syntax is too verbose for common cases, so I'd like to propose either adding alternative API or merging both into single component.

Standard case:

<UISrefActive class="active"><UISref to="messages"><a>Messages</a></UISref></UISrefActive>
<UISref to="messages" activeClassName="active">Messages</UISref>

Custom component:

<UISrefActive class="active"><UISref to="messages"><button>Messages</button></UISref></UISrefActive>
<UISref to="messages" activeClassName="active" component="button">Messages</UISref>

ui-router doesn't catch nested lazy loaded states

When I have state structure like this ( nested + lazily loaded )

// About 
const rootState = {
  name: 'about',
  url: '/about', 
  lazyLoad: () => System.import('./about').then(module=>module.states) 

// Contact
const aboutState = {
  name: '',
  url: '/contact', 
  lazyLoad: () => System.import('./contact').then(module=>module.states)

About and nested Contact wont catch, when going directly to /about/contact, and transition to nothing, although About chunk loads, but that's it.

Here is the code:

Here is the gif:


sticky states

Will you provider a feature just like sticky-state or react-keeper or Vuejs's keep-alive .
I'm using ng1 with uirouter-extra-state in my mobile's App and prepend migrates to react .
Thanks your work !

router.urlRouter.otherwise(…) doesn't work with pushStateLocationPlugin

Hi Marco,
first of all thank you for your work on UI Router framework.

I have two issues with new version (0.4.0) of React UI Router. Both are connected with config prop of UIRouter component:

  1. First - there is a wrong config prop example using the old router.urlRouterProvider.otherwise (I think it should be router.urlRouter.otherwise(…)).
  2. Second - otherwise setting through config prop works only with hashLocationPlugin for me. It doesn’t work with the recommended pushStateLocationPlugin plugin. This plugin redirects the app to the desired url, but nothing else happens. BUT it works correct when I set otherwise through manual bootstraping, i.e.:
const router = new UIRouterReact()

ui-router do not propagate my resolve to the component

I am pretty fresh in ui-router with react, I have a very simple example with two components. Top an Bottom

const Home = { name: 'top', component: () => (), url: '/' };
const Page1 = {
name: 'top.page1',
component: () => (),
resolve: [{
token: 'page1',
resolveFn: () => RootService()

export const Routes: IStateRoute[] = [

I am using axios for my http in RootService, so it simply returns axios.get('url')
then injecting my routes simply as

<UIRouter states={Routes} plugins={plugins}> <UIView/> </UIRouter>
The http fires and I can see it in my network in my web tools, if i place a loading component it even awaits for it until it resolves. nonetheless, the value of the resolve is not present in the props.resolves of the Page1 component.

I have red the documentation a couple of times and It does not seem I am missing anything.
Could you let me know what I might be doing odd?

Error thrown when executing tests

class Application extends Component {
    render() {
        return (
            <UIRouter plugins={[pushStateLocationPlugin]} config={this.onRouterInitialized}>
                    <UIView />

    onRouterInitialized(router) {
	    let stateDefinitions = [
	            name: 'home',
	            url: '/home',
	            component: Home

	    router.urlRouter.when('/', '/home');
	    stateDefinitions.forEach(state => router.stateRegistry.register(state));

The application works fine in browser, but when executing a simple test:

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Application />, div);

the test itself passes, but complains with

console.error node_modules/ui-router-core/lib/state/stateService.js:35
    TypeError: Cannot read property 'getElementsByTagName' of undefined
        at BrowserLocationConfig.Object.<anonymous>.BrowserLocationConfig.applyDocumentBaseHref (/Users/rattkin/Documents/Workspaces/WebStorm/project/node_modules/ui-router-core/lib/vanilla/browserLocationConfig.js:36:32)
        at BrowserLocationConfig.Object.<anonymous>.BrowserLocationConfig.baseHref (/Users/rattkin/Documents/Workspaces/WebStorm/project/node_modules/ui-router-core/lib/vanilla/browserLocationConfig.js:33:94)
        at UrlRouter.Object.<anonymous>.UrlRouter.href (/Users/rattkin/Documents/Workspaces/WebStorm/project/node_modules/ui-router-core/lib/url/urlRouter.js:186:66)

  console.error node_modules/ui-router-core/lib/state/stateService.js:36
    TypeError: Cannot read property 'getElementsByTagName' of undefined
        at BrowserLocationConfig.Object.<anonymous>.BrowserLocationConfig.applyDocumentBaseHref (/Users/rattkin/Documents/Workspaces/WebStorm/project/node_modules/ui-router-core/lib/vanilla/browserLocationConfig.js:36:32)
        at BrowserLocationConfig.Object.<anonymous>.BrowserLocationConfig.baseHref (/Users/rattkin/Documents/Workspaces/WebStorm/project/node_modules/ui-router-core/lib/vanilla/browserLocationConfig.js:33:94)
        at UrlRouter.Object.<anonymous>.UrlRouter.href (/Users/rattkin/Documents/Workspaces/WebStorm/project/node_modules/ui-router-core/lib/url/urlRouter.js:186:66)

I'm testing using the standard "npm test" from react-create-app.

Seems like there is an issue with providing base href. Since I'm testing component and not whole index (where the base usually is), it has a problem.

Suggestion: Throw error if user calls UIRouterReact.start() twice

I burned a few hours attempting to fix an issue that was actually a side-effect of unintentionally calling start() on my router object twice – once in my router.config file (inspired by the sample app,) and then once again by passing router to the UIRouter component.

The trouble is, it isn't particularly obvious that passing a UIRouterReact class to a UIRouter component (<UIRouter router={router}></UIRouter>) automatically calls the start() method on router.

Since I can't actually think of any reason why a user would choose to call router.start() twice in the same application, it may be prudent to throw an error if a user attempts to do so.

UIView multiple views?

Thanks so much for the port to ReactJs! Cannot imagine routing without ui-router.

I've spent many years using UI-Router with Angular, now I have moved to react, and am using the port. I know we can make multiple views in angular via

and then defining views:{ 'myView':{component:myComponent} }.

Wondering how to do this in React? I went through the docs and examples, and did not see it. Totally could have been me missing it though. Thanks again!

UISrefActive active state taking into account params

I have the following scenario

<UISrefActive class="active" key={index} exact={false} >
                <UISref to={dynamicView} params={{ page, filterType }}>

and the class="active" state is taking into account the params, in order to set the class as active.

how can I do so that the class is always active irrespective of the parameters given as a default, so in essence be active as long as the state is in the dynamicView path

In ng, we could have done something like

$scope.isActive = function() {  
   return $state.includes('playLotteries');

memoryLocationPlugin breaks in IE11 (ReactJs)

When using the memomryLocationPlugin IE11 has the following error:

Object doesn't support this action

The culprit seems to be the commen/extend method called here:

    BaseLocationServices.prototype.url = function (url, replace) {
        if (replace === void 0) { replace = true; }
        if (isDefined(url) && url !== this._get()) {
            this._set(null, null, url, replace);
            if (this.fireAfterUpdate) {
                var evt_1 = extend(new Event("locationchange"), { url: url }); // THIS LINE BREAKS
                this._listeners.forEach(function (cb) { return cb(evt_1); });
        return buildUrl(this);

extends comes from the common/common package where it falls back to:

function _extend(toObj) {
    return restArgs(arguments, 1).filter(identity).reduce(_copyProps, toObj);

I however have no idea myself why this is breaking in IE11

expose injected props from UI-View interface

It would be nice if there was a interface for component props definition. Currently there is none and one has to define it by itself.

Proposed Implementation:

interface Resolves {
  [key: string]: any,
  $stateParams: StateParams,
  $transition$: Transition,
export interface InjectedProps {
  transition?: Transition,
  resolves?: Resolves,
  className?: string,
  style?: Object,

so I can use it for my ReactClass or Stateless component like this:

import * as React from 'react';
import { Component, DOMAttributes } from 'react';
import { InjectedProps } from 'ui-router-react';

interface FooContainerProps extends InjectedProps<any>,DOMAttributes<any> {}
interface FooContainerState {}

class FooContainer extends Component<FooContainerProps,FooContainerState> {
    const {transition} = this.props;
    const {what='awesome'} = transition.params();
    return <div>UI Router is {what}!</div>;

I can do PR if you are ok with that.


Issue with UISrefActive and hashLocationPlugin?


For some reason the UISrefActive components never render active as a class for the UISref components. Does this have something to do with the hashLocationPlugin? Or did I set something up wrong?



import {UIRouter, UIView, UISref, UISrefActive, hashLocationPlugin} from 'ui-router-react'


// define your states
const states = [
        name: 'login',
        url: '/login',
        component: LoginContainer
    }, {
        name: 'home',
        url: '/',
        component: DashboardContainer,
        resolve: [currentUserDep],
        redirectTo: redirectFn
    }, {
        name: 'tests',
        url: '/tests',
        component: TestsContainer,
        resolve: [currentUserDep],
        redirectTo: redirectFn
    }, {
        name: 'client',
        url: '/client/{clientId:int}',
        component: ClientContainer,
        resolve: [currentUserDep],
        redirectTo: redirectFn

// select your plugins
const plugins = [hashLocationPlugin];

const configRouter = router => {

UIRouter Component

<UIRouter plugins={plugins} states={states} config={configRouter}>

Bootrstrap nav

<nav className="navbar navbar-default">
    <div className="collapse navbar-collapse" id="navbar-collapse-1">
        <ul className="nav navbar-nav">
                <UISrefActive class={'active'}>
                    <UISref to="home">
                            <span className="glyphicon glyphicon-dashboard" aria-hidden="true"></span> Dashboard
                <UISrefActive class={'active'}>
                    <UISref to="tests">
                            <span className="glyphicon glyphicon-education" aria-hidden="true"></span> Tests
        <div className="navbar-right">

Unfriendly manual

I used to do front-end with angular.js. And ui-router was just perfect for me. Because I had a good memory with ui-router in angular.js, I am trying to use ui-router in React too. However, it seems like the manual or documentation is very unfriendly for new people.

Now, I am trying to configure otherwise() function in react, but have no clue what am I supposed to do. Nothing is found in the official document and there are not many resources out there.

Redirecting after form login

Hello team,

Please help to solve a trivial issue: how should I programatically navigate to a certain route? For example, when user clicks a button on login form, after the form is validated, we move user to /home route.
Side note: I think it will also be very helpful to include into an official tutorial. Existing examples are only showing how to work with <UISref> elements to navigate.

So far, the way that I found is by injecting$transition$ into a resolve() function, then saving transition to a property of target component, then getting router instance from there. So the code looks like this:

// to get the router
const loginState = {
  name: 'login',
  url: '/',
  component: Login,
  resolve: [{
    token: 'router',
    deps: ['$transition$'],
    resolveFn: (trans) => trans.router
// then inside of <Login> component:
  onSubmit(e) {

This code is working but it looks ugly. I'm sure there's a better way :)

Better docs/tutorials

First of all, let me congratulate and thank you on your awesome work on the UI-Router port.
I worked with Angular 1.x for few years and UI-router was my "go to" router, and coming to React I found React router to be a pretty cheap router implementation (unstable API, routes bound to URL instead of state, etc), but it seems to be the most used by the community.

I believe UI-Router has the potential to do for the React community what it did for the Angular community, but it really needs better documentation and well written tutorials to encourage people to start using it. I almost gave up on UI-Router because I couldn't find a way to programmatically changing the state, it doesn't say anywhere that the "transition" object is passed to the route's component as a prop.

The fact that lot's of the React wrapper docs point to the core router docs doesn't help a lot, as I believe that kills the purpose of having a react wrapper that abstracts ui-router to work in a "react way".

Please don't take any of this as criticism, its just a feedback as I'd really love to see ui-router as the "default" routing solution for React. And again, congrats on the outstanding work on wrapping UI-Router for React, and please let me know if there's anything I can help with.

Webpack compilation issues?

I have been trying to use ui-router-react but can not get past webpack complaints for some reason.
ERROR in [at-loader] node_modules/ui-router-core/lib/common/common.d.ts:388:31
TS7006: Parameter 'a' implicitly has an 'any' type.

ERROR in [at-loader] node_modules/ui-router-core/lib/common/common.d.ts:388:34
TS7006: Parameter 'b' implicitly has an 'any' type.

ERROR in [at-loader] node_modules/ui-router-core/lib/resolve/resolveContext.d.ts:7:22
TS7005: Variable 'NATIVE_INJECTOR_TOKEN' implicitly has an 'any' type.

ERROR in [at-loader] node_modules/ui-router-core/lib/transition/transitionHook.d.ts:13:37
TS7006: Parameter 'error' implicitly has an 'any' type.

ERROR in [at-loader] src/components/loginComponent.tsx:23:33
TS2314: Generic type 'KeyboardEvent' requires 1 type argument(s).

ERROR in [at-loader] src/components/loginComponent.tsx:32:31
TS2314: Generic type 'KeyboardEvent' requires 1 type argument(s).

These errors (besides last two) only happen when I try to import
import {UIRouter, UIView, UISref, UISrefActive, pushStateLocationPlugin} from 'ui-router-react';

here is link to the project under branch reactRouting:
any advice and help would be great, thank you in advance I hope this is just a small stupid step I missed cause this is frustrating.

Code Splitting

Is there a way to use route-based code splitting with ui-router/react?

React setState() fails when called from UI-Router Transition Hook

I am attempting to pass stateParams from a child route to its parent route:


this.props.transition.router.stateService.go('parent', {
    sampleMember: 'sample text data',

I am attempting to capture this data in the parent route component:


onSuccess(trans, state) {
    const sampleMember = trans.targetState().params().sampleMember;

        sampleFromChild: sampleMember

onSuccess is registered in the Parent component's constructor and fires as expected. I am also successfully retrieving sampleMember from the params().

However, setState is consistently aborted by React due to the component's _reactInternalInstance member being undefined. setState calls enqueueSetState and enqueueCallback which both fail (noop) if this._reactInternalInstance is falsey.

I am using this same pattern in an Angular version of this sample application (with UI Router) and it works as expected. Am I missing something here, or is this a legitimate bug?

My state definitions (in case it matters):

var app_states = [{
        name: "parent",
        url: "/parent",
        component: Parent
        name: "child",
        parent: "parent",
        url: "/child",
        views: {
            "!$default": Child

transition to another state.

With React being very very component based. How do I transition from one state to another?

I am seeing calling or .go but that is only accessible from the parent state. Not accessible from the child components that are building that parent state.

Thanks. Sorry if I am missing something.

both <UISref/> and stateService.go doesn't work properly with state definition

If I have following state definitions where children are defined with parent:

const userListRouteConfig: ReactStateDeclaration = {
  name: 'users',
  url: '/',
  component: UsersPage

const userCreateRouteConfig: ReactStateDeclaration = {
  parent: 'users',
  name: 'new',
  url: '/new',
  component: UserCreatePage

and UsersPage component with UISref or imperative injected router and relative reference to child:

>create new</MyButton>
<UISref to=".new">
  <button>create new</MyButton>

it doesn't transition to new route, even it doesn't throws any error.

this doesn't work as well:

<UISref to="">
  <button>create new</MyButton>

What works, is to explicitly define just the name, which is not very convenient for user, who is in the react component, because, he doesn't immediately know, that the create "new" is a child route

<UISref to="new">
  <button>create new</MyButton>

Passing parent view's state to nested (or children) component view.

It must be very stupid question but I wasn't able to find any sound solution to my question on the web. So I am posting it if I can get help from here.

Basically I want to make nested views. I was able to make nested views. However, I have no idea how to pass parent's state to nested view's component.

I tried below but didin't work

<UIView user={this.state.user}/>

Also, I am curious how parent and child (or nested) views acually communicate in ui-router. Do they follow the typical data flow in react.js? For example, usually I make functions and save data to state in container component (parent) and pass to children component. So technically child components emit events and parent do the actual work responding to the emitted events.


How to use the results of the resolve to redirectTo a new state?

My default state route has a resolve that gets the name of the users default report (view). How can I use the result of that resolve to redirectTo: ?

I see this from the API:

// a fn returning a promise for a redirect
.state('G', {
  redirectTo: (trans) => {
    let svc = trans.injector().get('SomeAsyncService')
    let promise = svc.getAsyncRedirectTo(;
    return promise;

but in this react version... I don't think getAsyncRedirectTo is available... or if it is, I'm not finding it.

and now that I recheck let svc = trans.injector().get('MyService') does not return either. Thows error:
Error: Resolvable async .get() not complete:"MyService"

How should I be doing this?

Inject resolves as individual props

Hello everyone,

We have been discussing whether to change the current UIView behaviour regarding the injected resolves in the routed component.


Currently the UIView component wraps all the resolves into a single resolves prop that is injected in the routed component. This makes the routed component coupled to the router API, which renders it non reusable in other situations.

// state declaration
const myState = {
  url: '/',
  name: 'myState',
  component: MyComponent,
  resolve: [
    { token: 'someResolve', resolveFn: () => MyService.getSomeData() }

// class component
class MyComponent extends Component {
  render() {
    const {someResolve} = this.props.resolves;
    return (
      <p>Resolved is: {someResolve}</p>

// or function component
const MyComponent = ({ resolves }) =>
  <p>Resolved is: {resolves.someResolve}</p>;


We were thinking about injecting the resolves as individual props, in order to decouple the component from the router API, especially when the component doesn't access the transition so it doesn't really need to know about the router at all.

// class component
class MyComponent extends Component {
  render() {
    const {someResolve} = this.props;
    return (
      <p>Resolved is: {someResolve}</p>

// or function component
const MyComponent = ({ someResolve }) =>
  <p>Resolved is: {someResolve}</p>;


The change in code would be trivial, but this would be a breaking change as every routed component must be updated accordingly (nothing too painful, but still a pita).

The other problem we see with this solution is the risk of props collision, especially with the transition props that is silently injected along with the resolves. This means the user has some restriction on what names can be used for the resolves, and it might be wise to add a warning in case of collision.

Ultimately we wanted to know what y'all think about this change, if you have incurred in any problem related to this and if you think you would benefit from this update. Please keep in mind that the current version is a pre-release and this would be the best time to implement such a breaking change, before hitting production-ready stable versions.


I suggest a connect component for ui-router-react be provided since accessing context directly isn't ideal. Something like:

import React, {Component} from 'react';
import PropTypes from 'prop-types';

const ConnectWithRouter = (params = (router) => ({router})) => (WrappedComponent) => {
  class connector extends Component {
    static contextTypes = {
      router: PropTypes.object

    constructor(props, context) {
      super(props, context);
      this.context = context;

    render() {
      return <WrappedComponent {...params(this.context.router)} {this.props} />

    return connector;

return ConnectWithRouter;

Sorry I'd make a PR but I am not familiar enough with TypeScript.

Deprecated Warning about PropTypes

Console says -
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

I guess this is for defining const in index.js (root) file. Can you please help me get out from here?

Query params resolves as undefined

I have this state definition:
const routerState = { name: 'router', url: '/sign-router?event', component: SignRouter }; const router = new UIRouterReact(); router.urlRouterProvider.otherwise('/'); router.stateRegistry.register(routerState); router.start();

event should be a state param defined in the url as a query param but trying for example http://localhost:8080/#/sign-router?event=ttl_expired the state component get the following values in the props.resolves:
resolves: { $stateParams: { #: null, event: undefined },... }

Am I missing any state param configuration for query params? If use the /route/:param notation works but not with query params notation.

Error: setUrl()

Hey all,

I just found out about a react implementation of ui-router and was playing around with it. The current version of ui-router-core from npm kept rendering setUrl error.

  • From urlRouter
    UrlRouter.prototype.push = function (urlMatcher, params, options) {
        var replace = options && !!options.replace;
        $location.setUrl(urlMatcher.format(params || {}), replace);

Fixed it locally by changing setUrl to url. Thought I'd notify you awesome people here all as well. Thanks!

Remove es6-shim dependency

As far as I can tell it's not being used and if I've missed something and is being imported somewhere, library still shouldn't modify global environment.

Setting Default Route in ui-router-react

How does one go about defining a default landing route in ui-router-react, ie the state you wish to navigate to on something like http://localhost:8080?

When using ui-router-ng2 I did something like this....

let homeState  = { name: 'home',  url: '',       component: TaskListComponent }; 
let tasksState = { name: 'tasks', url: '/tasks22',  component: TaskListComponent }; 
let aboutState = { name: 'about', url: '/about22',  component: AboutComponent };
UIRouterModule.forRoot({ states: [ homeState, tasksState, aboutState ], useHash: true })

which triggers navigation to the home state on the default landing. I tried to something equivalent in ui-router-react by using the following

var app_states = [
  {name: "home",  url: '',           component: UserList },
  {name: "users", url: "/userList",  component: UserList },
  {name: "todos", url: "/todoList",  component: TodoList }
   <UIRouter plugins={[pushStateLocationPlugin]} states={app_states} >
      <UISrefActive class="active"><UISref to="users"><a>Users</a></UISref></UISrefActive>
      <UISrefActive class="active"><UISref to="todos"><a>ToDos</a></UISref></UISrefActive>

but it doesn't seem to work the same, ie upon navigating to http://localhost:8080 the react router doesnt't navigate to the home state as I expected it--it does nothing but display the nav panel (which works fine when i start clicking on linkds)

Is there some way to effect the equivalent default state in the react version of ui-router?

v0.3.0: hashLocation query params not working

The hashLocation query params are not working when accessing them from the transition:


const state = {
  name: 'path',
  url: '/path?param1&param2',
  component: MyComponent

Inside MyComponent at url /#/path?param1=foo&param2=bar:

render() {
  const params = this.props.transition.params();


{ #: null, param1: "", param2: "" }

Rejected promise does not fail state entry

I have a state configured like this:

    name: 'home',
    url: '/',
    component: DashboardContainer,
    resolve: [
            token: 'currentUser',
            resolveFn: () => store.dispatch(getCurrentUser())
                .then(res => {
                    if (!res.value) {
                        throw new Error('The current user could not be identified.');
                    // debugger;
                .catch(err => {
                    // debugger;
    onEnter: () => {
        // debugger;
    onExit: () => {
        // debugger;

The getCurrentUser action looks like this:

return {
    payload: ax.request({
        url: urlJoin(
        method: 'get',
        maxRedirects: 0
    }).then(res => {
        // debugger;
        if (!( && {
            throw new Error('The current user could not be identified.');
    }).catch(err => {

When walking through this transition, I get to the debugger in the getCurrentUser action and throw the Error because we didn't get the user back. This then executes the console.warn(err). Then it executes the then of the store.dispatch promise, which subsequently bubbles that error and hits the debugger in the catch of the store.dispatch promise.

However, even though the promise is being failed, the onEnter is still firing for this state and the state is being rendered; what I'd like to do is navigate to the Login state.

What did I do wrong here?

router.stateService.go History Push Error

After upgrading from 0.3.0 to 0.4.0, I am getting the following error message when using router.stateService.go(statename):

Failed to execute 'pushState' on 'History': A history state object with URL 'http://sales/' cannot be created in a document with origin 'http://localhost:8090' and URL 'http://localhost:8090/home'.

I still transition correctly to the state; but the url doesn't reflect. Navigating manually with the address also works.

UISrefActive throwing error about undefined class

I have defined a UISrefActive component like the following, but it is throwing an error about an undefined value for class.

<UISrefActive class="active">
    <UISref to="home">
            <span className="glyphicon glyphicon-dashboard" aria-hidden="true"></span> Dashboard

The error in the Console is:

Warning: Failed prop type: The prop class is marked as required in UISrefActive, but its value is undefined... in UISrefActive

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.