This repository has been archived by the owner on Mar 10, 2021. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
117 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,119 @@ | ||
# unirouter | ||
|
||
## To Do | ||
[![Version][version-svg]][package-url] | ||
[![Build Status][travis-svg]][travis-url] | ||
[![License][license-image]][license-url] | ||
[![Downloads][downloads-image]][downloads-url] | ||
|
||
* implement prevent-navigation with onbeforeunload | ||
* remember the user's scroll position | ||
A minimal and (soon to be) universal routing engine using [redux][redux], | ||
[uniloc][uniloc], and the HTML5 history api. Inspired by | ||
[@james_k_nelson][james-k-nelson]'s | ||
[Simple Routing with Redux and React][redux-routing] and | ||
[@agamennon][guilherme]'s [redux-tiny-router][redux-tiny-router]. | ||
|
||
It treats routing as simple state, stored in Redux and made available to | ||
components via Redux's `connect()` wrapper. Manage your components however you | ||
want using the route data generated by [uniloc][uniloc]. Use the included | ||
`<Link/>` component to generate urls from route names and options (often | ||
referred to as "reverse lookup"), and trigger routing events when users click | ||
your links. | ||
|
||
## Install | ||
|
||
```sh | ||
npm install --save unirouter redux | ||
``` | ||
|
||
Redux is the only hard peer dependency, but if you want to use the `<Link/>` | ||
component you'll need to install React as well: | ||
|
||
```sh | ||
# Optional | ||
npm install --save react | ||
``` | ||
|
||
## Initialize | ||
|
||
Before you can use unirouter, you'll need to include the provided reducer in | ||
your combined redux reducer: | ||
|
||
```js | ||
import {combineReducers, createStore} from 'redux' | ||
import myReducer from '../path/to/my/reducer' | ||
import unirouterReducer from 'unirouter/reducer' | ||
|
||
const reducer = combineReducers({ | ||
router: unirouterReducer, | ||
myStuff: myReducer, | ||
}) | ||
|
||
let store = createStore(reducer) | ||
``` | ||
|
||
You'll also need to call the `init()` function to set up your initial routing | ||
information and establish event hooks for the HTML5 history api: | ||
|
||
```js | ||
import init from 'unirouter/init' | ||
import getMyStore from '../path/to/my/store' | ||
|
||
const store = getMyStore() | ||
|
||
const routes = { | ||
listContacts: 'GET /contacts', | ||
postContact: 'POST /contacts', | ||
editContact: 'GET /contacts/:id', | ||
} | ||
|
||
const aliases = { | ||
'GET /': 'listContacts', | ||
} | ||
|
||
init(store, routes, aliases) | ||
``` | ||
|
||
This is best done in your init script on the front end, or in your render | ||
middleware on the server. | ||
|
||
## Use | ||
|
||
If the user were to come in with the url `/contacts/13/edit?details=true`, the | ||
following state would be available using whatever key you passed to the | ||
`combineReducers()` call mentioned above: | ||
|
||
```js | ||
{name: 'editContact', options: {id: 13, details: true}} | ||
``` | ||
|
||
Use this in your top level component to determine which components should be | ||
rendered based on the current route information. | ||
|
||
To link directly to a route name, use the included `<Link/>` React component: | ||
|
||
```js | ||
export class MyComponent extends Component { | ||
render() { | ||
return ( | ||
<div> | ||
<h1>Edit Your Contacts</h1> | ||
<Link href="#edit-contacts" name="editContacts" options={{id: 13, details: true}}/> | ||
</div> | ||
) | ||
} | ||
} | ||
``` | ||
|
||
[downloads-image]: https://img.shields.io/npm/dm/unirouter.svg?style=flat-square | ||
[downloads-url]: http://npm-stat.com/charts.html?package=unirouter | ||
[guilherme]: https://github.com/Agamennon | ||
[james-k-nelson]: https://twitter.com/james_k_nelson | ||
[license-image]: http://img.shields.io/badge/license-MIT-green.svg?style=flat-square | ||
[license-url]: LICENSE | ||
[package-url]: https://npmjs.org/package/unirouter | ||
[redux-routing]: http://jamesknelson.com/simple-routing-redux-react/ | ||
[redux-tiny-router]: https://github.com/Agamennon/redux-tiny-router | ||
[redux]: https://github.com/rackt/redux | ||
[travis-svg]: https://img.shields.io/travis/bkonkle/unirouter/master.svg?style=flat-square | ||
[travis-url]: https://travis-ci.org/bkonkle/unirouter | ||
[uniloc]: http://unicornstandard.com/packages/uniloc.html | ||
[version-svg]: https://img.shields.io/npm/v/unirouter.svg?style=flat-square |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
Empty file.