kiss-router-react v2.1.0

KISS Router React.js Binding

This is a binding to use kiss-router comfortably within React.js. It's a collection of components to display components based upon the current route, and to navigate.

In addition to simple routing, kiss-router-react also supports triggering a function to produce a promise on matching a route. If you specify a resolvePromise function in your route definition, and use the <AsyncRouter /> component, instead of passing just the url and query parameters to your render callback or component, it will pass params, loading, data and error.

Here's an example of it in use:

import createBrowserHistory from 'history/createBrowserHistory';
import { Router } from 'kiss-router';
import React, { Component, PropTypes } from 'react';
import { AsyncRouter, Route, NotFound, Link } from 'kiss-router-react';

const routes = [
  { name: 'HOME', path: '/' },
  { name: 'POSTS', path: '/posts', resolvePromise: ({ page = 1 }) => /* return a promise*/ },
  { name: 'POST', path: '/posts/:id', resolvePromise: ({ id }) => /* return a promise*/ },
];

function Home(props) {
  return (<h1>Homepage</h1>);
}

function Posts({ params, waiting, error, data }) {
  if (waiting) return <h1>Loading Posts</h1>;
  if (error) return <h1>Error Loading Posts: {error}</h1>;
  
  // `data` is the resolved promise data 
  const posts = data.map(post =>
    (<Link to={`/posts/${post.id}`}>Post {post.id}</Link>)
  );

  return (
    <div>
      <h1>Posts</h1>
      <h2>Page {params.page || 1}</h2>
      <div>{posts}</div>
    </div>
  );
}

function Post({ waiting, error, data }) {
  if (waiting) return <h1>Loading Posts</h1>;
  if (error) return <h1>Error Loading Posts: {error}</h1>;

  return (<h1>Post {data.id}</h1>);
};

function NotFound() {
  return (<h1>Page Not Found!</h1>);
}

class MyApp extends Component {
  constructor(props) {
    super(props);

    const history = createBrowserHistory();
    const router = new Router(routes, history);
    this.state = { router };
  }

  render() {
    return (
      <AsyncRouter router={this.state.router}>
        <h1>
          <Link to="/">My App</Link>
        </h1>
        
        <Route matching="HOME" component={Home} />
        <Route matching="POSTS" component={Posts} />
        <Route matching="POST" component={Post} />

        <NotFound component={NotFound} />
      </Router>
    );
  }
}

The components exposed by this library are as follows:

<Router>

This component provides the context to all of the other components so you aren't required to pass down a bunch of properties for the routes.

Properties

<AsyncRouter>

This is an uncontrolled version of the <Router /> component with support for resolving promises on navigation to a route. In your routes array, you can include a function called resolvePromise with a route, that takes an object (containing url and query params), and returns a promise.

Properties

<Route>

Allows you to display content when a route match occurs. Takes a component to display the route. It will render the component with params (an object with url & query params), waiting (if waiting on promise to resolve), data (data from resolved promise) and error (error from rejected promise). If your route does not use resolvePromise, you can ignore the waiting, data, and error keys.

Properties

<NotFound>

Allows you to display content when no route is matched.

Properties

<Link>

Produces a link that will use push or replace from the history object provided to <Router>. This needs to be used for internal links to prevent page refreshes.