Director Router

1.2.8 · abandoned · verified Sun Apr 19

This library, Director Router, provides a routing solution for both client-side (browser) and server-side (Node.js HTTP and CLI) JavaScript applications. It is dependency-free, aiming for minimal differences in usage across environments. Key features include hash-based client-side routing, and traditional path-based routing for Node.js servers and command-line interfaces. The package's current stable version is 1.2.8, released nearly a decade ago. It primarily focuses on hash-based routing for the browser and traditional URL path matching for servers, predating widespread adoption of the HTML5 History API for client-side routing. Its release cadence is effectively stalled, with no updates in many years, making it unsuitable for new projects due to a lack of maintenance and modern feature support.

Common errors

```
ReferenceError: Router is not defined
```
cause The Director library script (`director.min.js`) was not loaded correctly in the browser, or `Router` is being accessed before it's available.

fix Ensure the `<script>` tag for `director.min.js` is present and correctly linked in your HTML, and that your application code accessing `Router` runs after the library has loaded.
```
TypeError: Router is not a function
```
cause In a Node.js environment, the `director` package was imported incorrectly, or `require('director')` did not return the `Router` constructor as expected.

fix Use `const Router = require('director');` for CommonJS imports in Node.js. Avoid destructuring if `Router` is the default export, or attempting ESM `import` statements.
```
Error: Route '/my/missing/path' not found
```
cause The requested URL path does not match any of the routes defined in the router's configuration.

fix Verify that the URL path being accessed exactly matches a defined route pattern, including any parameters. Ensure the router is initialized and listening for changes (e.g., `router.init()`).

Warnings

deprecated The `director` package is abandoned and has not been updated in nearly a decade. Its dependencies are outdated, and it lacks modern features like official ESM support or the HTML5 History API. It is not recommended for new projects.
Fix: Migrate to a actively maintained routing library like `react-router`, `vue-router`, or `express` (for server-side).
deprecated The provided quickstart examples use `rawgit.com` for CDN delivery, which has been deprecated since 2019. Directly linking to GitHub raw files for production is also a security risk and unreliable.
Fix: Do not use `rawgit.com` or direct GitHub raw links. For testing, download the script locally or use a proper CDN if one were available (which is not the case for Director).
gotcha Director primarily relies on hash-based routing (`#/path`) for client-side applications. It does not natively support the HTML5 History API (`pushState`, `replaceState`), which is the standard for modern single-page applications.
Fix: If History API support is crucial, you will need to implement a custom solution or choose a different routing library. Director's core design is centered on hash-routing.
gotcha In browser environments, Director exposes the `Router` constructor as a global variable. This can lead to naming collisions if other scripts on the page also define a global `Router`.
Fix: Ensure `director.min.js` is loaded after any potential conflicting libraries, or rename the global `Router` if possible (which Director does not explicitly support out-of-the-box, making it a design limitation).

Install

npm install director npm
yarn add director yarn
pnpm add director pnpm

Imports

Router
wrong:
```
import Router from 'director';
```
correct:
```
const Router = require('director');
```
For Node.js environments, Director is primarily used via CommonJS `require()`. It does not officially support ESM, and direct ESM imports will likely fail without a transpilation step.
Router (browser global)
```
<script src="path/to/director.min.js"></script>
<script> var router = Router(routes); </script>
```
When included via a script tag in the browser, Director exposes the `Router` constructor as a global variable. This can lead to naming collisions with other libraries.

Quickstart

Demonstrates basic client-side hash-based routing in an HTML file using Director, logging route events to the console.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Director Client-Side Routing Example</title>
    <script src="https://rawgit.com/flatiron/director/master/build/director.min.js"></script>
    <script>
      var author = function () { console.log("Route: author"); };
      var books = function () { console.log("Route: books"); };
      var viewBook = function (bookId) {
        console.log("Route: viewBook, ID: " + bookId);
      };

      var routes = {
        '/author': author,
        '/books': [books, function() {
          console.log("Route: An inline handler for books.");
        }],
        '/books/view/:bookId': viewBook
      };

      var router = Router(routes);
      router.init();

      console.log('Router initialized. Click links to test hash-based routing.');
    </script>
  </head>
  <body>
    <h1>Director Client-Side Router</h1>
    <ul>
      <li><a href="#/author">#/author</a></li>
      <li><a href="#/books">#/books</a></li>
      <li><a href="#/books/view/123">#/books/view/123</a></li>
      <li><a href="#/books/view/456">#/books/view/456</a></li>
    </ul>
    <p>Check the console for route handler output.</p>
  </body>
</html>

view raw JSON →