stukennedy/riot-router

Riot Router - A simple routing solution for Riot http://gabrielmoreira.github.io/riot-router

A routing library for Riot.

Why

To make it easier to use Riot in SPA applications, I created this url routing library inspired by the React-Router API.

How?

First you create your riot tags:

<script type="riot/tag">
  <user>
    <div>Hello user {opts.id} - {opts.name}</div>
  </user>

  <users>
    <ul>
      <li><a href="#/user/1?name=Roger">Open user 1 - Roger</a></li>
      <li><a href="#/user/2?name=That">Open user 2 - That</a></li>
    </ul>
  </users>
</script>

Then you add Riot and Riot-Router to your development page:

<script src="https://unpkg.com/riot@3.0/riot+compiler.min.js"></script>
<script src="https://unpkg.com/riot-router@0.9/dist/router.min.js"></script>

Add this special tag in your page:

<route></route>

or, if your prefer:

<div data-is="route"></div>

And finally, you declare your routes and initialize your application:

<script>
router.routes([
  new Router.Route({tag: 'user', path: '/user/:id'}), // Named paths
  new Router.DefaultRoute({tag: 'users'})
])
riot.mount('*');
router.start();
</script>

Done!

See an example on jsFiddle

Installation

npm install riot-router

This library is written with CommonJS modules. If you are using browserify, webpack, or similar, you can consume it like anything else installed from npm.

Advanced examples

var Route = Router.Route, 
    DefaultRoute = Router.DefaultRoute, 
    NotFoundRoute = Router.NotFoundRoute, 
    RedirectRoute = Router.RedirectRoute;

router.routes([
  new DefaultRoute({tag: 'home'}),
  new Route({tag: 'about'}),
  new Route({tag: 'users'}).routes([
     new Route({path:'top', tag: 'users-home', api: {text: 'Select a top user'}}),
     new Route({path: '/user/:userId', tag: 'user'}),
     new DefaultRoute({tag: 'users-home', api: {text: 'Select a user'}}),
     new NotFoundRoute({tag: 'not-found'})
   ]),
  new NotFoundRoute({tag: 'not-found'}),
  new RedirectRoute({from: 'company', to: 'about'}),
  new RedirectRoute({from: 'u', to: 'users/user'})
]);

riot.mount('*');
router.start();