Skip to content
The data-first JavaScript router
Branch: master
Clone or download
Pull request Compare This branch is 15 commits ahead, 3 commits behind grahammendick:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Navigation
NavigationReact
NavigationReactMobile
NavigationReactNative
build/npm
.gitignore
LICENSE
README.md
gulpfile.js
package-lock.json
package.json
tsconfig.json

README.md

Navigation

Navigation is the data-first JavaScript router. Try it out.

  • 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.

Build

Once you've cloned the repository, you can install the dependencies and run the build:

npm install
npm run build

Running npm test executes the unit tests.
Running npm run package outputs the npm packages inside the build/npm folder.

Thanks to BrowserStack for their help with cross browser testing

Code

You'll find the Navigation router source code in the Navigation folder. It's written in TypeScript and is built on top of node.js. The NavigationReact folder contains the source code for the Hyperlink components.

Download

The Navigation router is made up of three npm packages: navigation, for the core router, navigation-react, for the Hyperlink components, and navigation-react-mobile, for native-like navigation.

var Navigation = require('navigation');
var NavigationReact = require('navigation-react');
var NavigationReactMobile = require('navigation-react-mobile');

Example

Here's the Hello World example from the documentation. The example has two views. One view displays a Hyperlink that says 'Hello'. Clicking this Hyperlink navigates to the second view displaying the text 'World' inside a div. The Hyperlink passes across a number that sets the div's font-size.

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

stateNavigator.states.hello.renderView = function() {
  return (
    <NavigationReact.NavigationLink 
      stateKey="world"
      navigationData={{size: 20}}>
      Hello
    </NavigationReact.NavigationLink>
  );
};

stateNavigator.states.world.renderView = function(data) {
  return <div style={{fontSize: data.size}}>World</div>;
};

stateNavigator.start();

ReactDOM.render(
  <NavigationReact.NavigationHandler stateNavigator={stateNavigator}>
    <NavigationReact.NavigationContext.Consumer>
      {({ state, data }) => state.renderView(data)}
    </NavigationReact.NavigationContext.Consumer>
  </NavigationReact.NavigationHandler>,
  document.getElementById('app')
);
You can’t perform that action at this time.