Data First

Other JavaScript routers have got it all back to front. They want you to configure your routes before you even know what data you're passing. With the Navigation router, you can delay your route configuration until after your application's up and running.

Routes Last

How can your application run if you haven't set any routes? The Navigation router generates interim routes and passes all data in the query string. At any time, you can configure the real routes and introduce route parameters without changing any code.

Try It Out

Take a look at this working application. It's a Hyperlink you can click to indicate whether you like something. It works even though there's no route configured yet. Click the toggle Hyperlink below then take a look at the browser Url. The Navigation router's generated an interim Url of '/?like=true1_1', but you can change it to '/example/true' without touching the code:

  1. Start by setting a route in the configuration below. Type the word 'example' in the route text box. As you type, watch the browser Url automatically update to '/example?like=true1_1'
  2. Next, change the 'like' indicator from a query string to a route parameter. Update the route text box to 'example/{like}'. Keep your eye on the Url as it changes to '/example/true1_1'
  3. The Navigation router passes around the 'like' indicator as a boolean. It uses the trailing characters of the Url to keep track of the type. Tidy up the Url by configuring the type instead. Pick 'boolean' from the drop down below and watch the Url become 'example/true'

var stateNavigator = new Navigation.StateNavigator([
  {key: 'example', , }}
]);

stateNavigator.states.example.navigated = function(data) {
  ReactDOM.render(
    <NavigationReact.NavigationLink 
      stateKey="example"
      navigationData={{like: !data.like}}
      stateNavigator={stateNavigator}>
      You {data.like ? 'like' : 'haven\'t liked'} this. Click to toggle.
    </NavigationReact.NavigationLink>,
    document.getElementById('app'));
};

stateNavigator.start();