navigo

Navigo provides several routing modes and patterns. You can find source code examples for the following implementations in the examples/ directory:

• Basic routing (with full page reload): Standard routing behavior.
• Basic routing (SPA experience): Single Page Application style routing.
• Using regular expressions: Routing using RegExp patterns.
• Node: Usage within a Node.js environment.
• Routing based on the hash in the URL: Using the URL hash for navigation.
• Mixed routing: Combining absolute URL navigation with hash-based navigation.
• Custom selector: Implementing custom logic for route selection.

To run the provided examples, navigate to the examples directory, install dependencies, and then start the local server for a specific example folder.

1. Install dependencies in the examples directory: yarn install.
2. Navigate to a specific example folder (e.g., basic, basic-spa, regexp).
3. Start the local server: yarn start.

The server will typically start at http://localhost:3000.

To integrate standard HTML links with Navigo and prevent full page reloads, add the data-navigo attribute to your <a> tags.

• Basic usage: <a href="/path" data-navigo>Link</a>
• Ignore link: Use data-navigo="false" to prevent Navigo from intercepting the click.
• Passing options: You can pass NavigateOptions via the data-navigo-options attribute using a comma-separated string format.
• Custom Selector: You can define a custom CSS selector for links during router initialization using the linksSelector option.

Note: Links with target="_blank" are ignored even if they have data-navigo.

Important: Since Navigo is not tied to a rendering engine, you must call router.updatePageLinks() whenever you dynamically change the DOM to ensure new links are intercepted.

You can install Navigo using a CDN script tag or via npm/yarn package managers.

CDN:

<script src="//unpkg.com/navigo"></script>

npm:

npm install navigo --save

yarn:

yarn add navigo -S

To use Navigo, import the library, initialize the router with your application's root path, define your routes, and call resolve() to start listening for changes.

1. Initialize: Pass the root path of your app to the Navigo constructor.
2. Define Routes: Use router.on(path, callback) to map a URL path to a function.
3. Resolve: Call router.resolve() to trigger the initial routing logic.
4. Navigate: Use router.navigate(path) to programmatically change the URL and trigger route resolution.

import Navigo from 'navigo';

const router = new Navigo('/');

router.on('/about', function () {
  // do something
});

router.resolve();

// To navigate programmatically:
router.navigate('/about');

To use Navigo, create a new instance of the Navigo class. The constructor requires the root path of your application as the first argument. You can optionally provide a second argument for RouterOptions.

Key options:

• strategy: Defines how many matches the router finds. Set to 'ALL' to find multiple matches, or 'ONE' (default) to stop after the first match.
• noMatchWarning: If set to true, prevents the router from logging a warning when no matching route is found.

You can integrate Navigo with HTML links by adding the data-navigo attribute. This automatically transforms standard <a> tags into Navigo navigate callers, preventing full page reloads.

<a href="/about/contacts" data-navigo>Contacts</a>