This router is aming to solve two problems that were not otherwise addressed by other routers:
- Using RefluxJs to handle all application state and changes
- Allow multiple independent components in a page that can all update the URL hash without overwriting echothers state
Defining a simple route:
import Routing from 'reflux-routing';
Routing.define('MyComponentKey', '/some-resource/:resourceId');
import Reflux from 'reflux';
import { Routing, RoutingStore } from 'reflux-routing';
class MyComponent extends Reflux.Component {
constructor(props) {
super(props);
this.stores = [RoutingStore]; // Attach to the routing store
this.storeKeys = ['MyComponentKey']; // We're only listening to the state related to routes defined with "MyComponentKey"
}
render () {
<div>My selected resource: {this.state.MyComponentKey.resourceId}</div>
}
}
When making routed links, you should always construct them usink the link method, as this will ensure that we don't mess up other component's state.
...
render () {
<a href={Routing.link('MyComponentKey', { resourceId: 1 })}>Resource 1</a>
<a href={Routing.link('MyComponentKey', { resourceId: 2 })}>Resource 2</a>
<a href={Routing.link('MyComponentKey', { resourceId: 3 })}>Resource 3</a>
<div>My selected resource: {this.state.MyComponentKey.resourceId}</div>
}
...
There is a shorthand for setting the location hash:
import { Routing } from 'reflux-routing';
//Define some route
Routing.define('MyComponentKey', '/some-resource/:resourceId');
//Now navigate to that route (directly updating the URI)
Routing.navigate('MyComponentKey', {resourceId: '999'});
This will trigger a hashUpdated action. This is just a shorthand for:
window.location.hash = Routing.link(key, state);
You can define a default value for all route parameters or specify that a value is required for the route to be matched:
Routing.define('UsersKey', '/user/:userId/:component', {
userId: { required: true }
component: { defaultValue: profile }
});
The router exposes a number of actions you can listen to instead of binding to the store:
This triggers everytime the hash is updated in the URL. Similar to listening on window.hashChange. When the page loads, the initial hash is loaded from the URL, but a hashUpdated action is NOT triggered (this may change).
This action is triggered everytime a route state changes. This is also triggered on page load if the initial hash is different from the default state. This action triggers for every route key.
This action triggers whenever a new route is defined.
import { RoutingActions, Routing } from 'reflux-routing'
Routing.define('Cutomer', 'customer/:cutomer_id');
class Store extends Reflux.Store {
constructor() {
super();
this.listenables = [RoutingActions];
this.setStateFromHash(location.hash);
}
onRouteUpdated(key, newState) {
if (key === 'Customer') {
//Do some fetching based on customer state, i.e.:
//fetch('/api/customer/' + newState.Customer.customer_id)....
// then(customer => this.setState({cusomer: customer}))
}
}
}