fission-router

Information

Usage

Install

npm install fission-router --save

Example

var Router = require('fission-router');
 
var appRouter = Router({
  // Route = /
  splash: {
    path: '/',
    view: SomeReactComponent
  },
  // Route = /login
  login: {
    path: 'login',
    view: SomeReactComponent
  },
  // Route = /home
  home: {
    path: 'home',
    view: SomeReactComponent,
 
    // Route = /home, this is activated when no other children are
    defaultChild: {
      view: SomeReactComponent
    },
 
    // Route = /home/asdf, this is activated when there is a child path segment
    // but no children were activated
    childNotFound: {
      view: SomeReactComponent
    },
    children: {
      // Route = /home/statistics, this is a subview of home
      stats: {
        path: 'statistics',
        view: SomeReactComponent
      },
      // Route = /home/job/123, this is a subview of home
      job: {
        path: 'job/:jobId',
        view: SomeReactComponent
      }
    }
  }
});
 
appRouter.start(document.body);

Differences

react-router is great but I don't like JSX and wanted a simpler API. This module provides a small wrapper that gives you the ability to provide an object with your route info instead of using JSX, renames a few things, and moves some stuff around.

Documentation

You should read the react-router documentation to get a full understanding of how this all works. This documentation is a very basic API overview of stuff that was changed.

Router(config[, options])

This returns a react router object, but with no .run. You can expect the same methods (transitionTo, replaceWith, etc.) that exist in react-router to exist on this object too.

Config format

The key of this object should be a unique name to describe the route.

• path
  • Optional string describing the path needed to activate the route
  • Path is relative to the parent path
• view
  • Required component function that you want rendered when the route is activated
• default
  • If this is the default view or not. Useful when you have a set of children, where one is activated by default. If unspecified this value will be false.
• children
  • optional object of child routes

If a route has no options that need to be specified then you can also just give the function like so:

children: {
  home: HomeView
}

which is just sugar for

children: {
  home: {
    view: HomeView
  }
}

Possible options

• location
  • A Router Location Implementation
  • Defaults to Router.locations.History
  • Can also be a string for testing
• Anything else react-router.create takes

Router#start(renderNode)

Starts listening to changes and renders active view to the given renderNode. renderNode must be a valid HTML element.

var router = Router({
  // ... some route config
});
router.start(document.body);

Router#stop()

Stops listening for changes from the location implementation.

This will start, render, then stop the router.

var router = Router({
  // ... some route config
});
router.start(document.body);
router.stop();

Router.Link

This is wrapped in a createFactory for your sanity.

Pointer to react-router.Link

Router.ChildView

If you have a child route that is active, this is a component that represents that. This is wrapped in a createFactory for your sanity.

Pointer to react-router.RouteHandler

Router Locations

These are all location implementations from react-router

Router.locations.History

Uses HTML5 History API to provide location information. Pointer to react-router.HistoryLocation.

Router.locations.Hash

Uses URL Hashbangs to provide location information. Pointer to react-router.HashLocation.

Router.locations.Refresh

Uses full page refreshes. This is a fallback for when you don't want to use hashbangs (ugly) but you can't use the History implementation (browser support), you can use this. Pointer to react-router.RefreshLocation.

View Mixins

Router.mixins.State

Pointer to react-router.State.

Provides some utilities for getting the current state of the router from the view it is mixed into.

Router.mixins.Navigation

Pointer to react-router.Navigation.

Provides some utilities for linking to, triggering, and sending data to other routes to the view it is mixed into.

Server-side rendering

Is supported. Docs coming soon.

LICENSE

(MIT License)

Copyright (c) 2015 Fractal contact@wearefractal.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.