slammy-router

A tiny router implementation for React

Usage no npm install needed!

<script type="module">
  import slammyRouter from 'https://cdn.skypack.dev/slammy-router';
</script>

README

Slammy-Router

Build Status

Slammy-Router is a tiny React router implementation, usable for single page apps. It only uses hashbangs, no pushState.

Installation

npm install --save-dev slammy-router

Usage example

import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'slammy-router';

class DefaultRoute extends React.Component {
    render() {
        
        return (
            <div>
                <p>Default route</p>
                <a href="#/route/second">Go to second route</a>
            </div>
        );
        
    }
};

class AnotherRoute extends React.Component {
    render() {
        
        return (
            <div>
                <p>Second route</p>
                <a href="#/route/params/ReactUser">Go to parameterized route</a>
            </div>
        );
        
    }
};

class ParamRoute extends React.Component {
    render() {
        
        return (
            <div>
                <p>Route with param "greeting": {this.props.params.greeting}</p>
            </div>
        );
        
    }
};

class NoSuchRoute extends React.Component {
    render() {
        
        return (
            <div>
                <p>The view for '{this.props.route}' was not found</p>
            </div>
        );
        
    }
};

let routes = {
    "/route/first": DefaultRoute,
    "/route/second": AnotherRoute,
    "/route/params/:greeting": ParamRoute
};

ReactDOM.render(<Router default="/route/first" notfound={NoSuchRoute} routes={routes} />, document.getElementById('example'));

Demo

You can clone this repository, and build (npm run build) from the example directory. Point your web browser to the index file of that same directory to try Slammy-Router.

Building this repo

$ npm install && gulp

Building the example

$ cd example/ && npm install && npm run build