https://github.com/react-dev-james/ui-and-react-router

https://github.com/react-dev-james/ui-and-react-router

javascript react spa typescript ui-router

Last synced: 13 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/react-dev-james/ui-and-react-router
• Owner: react-dev-james
• License: mit
• Created: 2018-01-11T07:35:51.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-02T02:02:01.000Z (almost 7 years ago)
• Last Synced: 2024-11-17T22:29:03.799Z (3 months ago)
• Topics: javascript, react, spa, typescript, ui-router
• Language: TypeScript
• Size: 282 KB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  
UI-Router-React

  

    

  

  

    

  

  

    

  



UI-Router provides extremely flexible, state based routing to the [React](https://facebook.github.io/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*](https://en.wikipedia.org/wiki/Finite-state_machine) to manage the transitions between those application states in a transaction-like manner.

## Getting started

The UI-Router package is distributed using [npm](https://www.npmjs.com/), the node package manager.

```

yarn add @uirouter/react

```

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

```jsx

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(

  

    

  ,

  document.getElementById('root')

);

```