| Package | fission-router |
| Description | A declarative layer on top of react-router with some other nice-to-haves |
| Node Version | >= 0.10 |
npm install fission-router --save
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);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.
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.
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.
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
}
}- location
- A Router Location Implementation
- Defaults to
Router.locations.History - Can also be a string for testing
- Anything else react-router.create takes
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);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();This is wrapped in a createFactory for your sanity.
Pointer to react-router.Link
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
These are all location implementations from react-router
Uses HTML5 History API to provide location information. Pointer to react-router.HistoryLocation.
Uses URL Hashbangs to provide location information. Pointer to react-router.HashLocation.
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.
Pointer to react-router.State.
Provides some utilities for getting the current state of the router from the view it is mixed into.
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.
Is supported. Docs coming soon.
(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.