Skip to content
🔼 UI-Router for React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs docs(API): fix example removing deprecated code Jan 13, 2017
examples
logo
src update react typings Sep 15, 2018
.babelrc
.gitignore chore(gitignore): ignore yarn-error.log Apr 20, 2018
.npmignore
.prettierignore
.prettierrc.json
.travis.yml chore(travis): normalize travis configs Apr 21, 2018
CHANGELOG.md 0.8.9 Jan 29, 2019
DOCS.md
LICENSE
README.md docs(README): update greenkeeper badge for consistency Jan 30, 2018
artifacts.json chore(scripts): Use uirouter/publish-scripts Sep 23, 2017
downstream_projects.json
jest.setup.js
package.json 0.8.9 Jan 29, 2019
tsconfig.jest.json chore(*): update peerDependency to support react@16.0.0-rc Sep 13, 2017
tsconfig.json
typedoc.json update to uirouter/core 5.0.21 Aug 11, 2018
webpack.config.js Just Use Prettier™ Apr 9, 2018
yarn.lock Merge pull request #418 from ui-router/dependabot/npm_and_yarn/react-… Mar 25, 2019

README.md

UI-Router-React

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];

ReactDOM.render(
  <UIRouter plugins={plugins} states={states}>
    <UIView />
  </UIRouter>,
  document.getElementById('root'),
);
You can’t perform that action at this time.