https://github.com/ui-router/react

🔼 UI-Router for React
https://github.com/ui-router/react

javascript react router spa state-machine typescript ui-router

Last synced: about 4 hours ago
JSON representation

🔼 UI-Router for React

• Host: GitHub
• URL: https://github.com/ui-router/react
• Owner: ui-router
• License: mit
• Created: 2016-06-20T19:14:56.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2024-03-22T16:57:17.000Z (3 months ago)
• Last Synced: 2024-06-28T19:42:55.722Z (3 days ago)
• Topics: javascript, react, router, spa, state-machine, typescript, ui-router
• Language: TypeScript
• Homepage: https://ui-router.github.io/react/
• Size: 4.69 MB
• Stars: 513
• Watchers: 15
• Forks: 128
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Lists

• awesome-react-routing - ui-router - UI-Router for React (Uncategorized / Uncategorized)
• awesome-stars - ui-router/react - 🔼 UI-Router for React (TypeScript)
• awesome - react - 🔼 UI-Router for React (TypeScript)

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.

## Docs & Resources

* [Tutorials and Docs](/docs)

* [Examples](/examples)

* [UI-Router website](https://ui-router.github.io/)

* [Changelog](/CHANGELOG.md)

* [Upgrading from `0.3.x` to `0.4.x`](/docs/upgrading-from-0.3.x-to-0.4.x.md)

## 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'),

);

```