universal router

A simple middleware-style router for isomorphic JavaScript web apps

kriasoft

1607

108

TypeScript

Universal Router

A simple middleware-style router that can be used in both client-side and server-side applications.

Visit Quickstart Guide (slides) |
Join #universal-router on Gitter to stay up to date

Features

It has simple code
with only single path-to-regexp dependency.
It can be used with any JavaScript framework such as
React, Vue, Hyperapp etc.
It uses the same middleware approach used in Express and Koa,
making it easy to learn.
It supports both imperative and
declarative routing style.
Routes are plain JavaScript
objects
with which you can interact as you like.

What users say about Universal Router

Just switched a project over to universal-router.
Love that the whole thing is a few hundred lines of flexible, easy-to-read code.

– Tweet by Greg Hurrell from Facebook

It does a great job at trying to be universal — it’s not tied to any framework,
it can be run on both server and client, and it’s not even tied to history.
It’s a great library which does one thing: routing.

– Comment on Reddit
by @everdimension

Installation

Using npm:

npm install universal-router --save

Or using a CDN like
unpkg.com or
jsDelivr
with the following script tag:

<script src="https://unpkg.com/universal-router/universal-router.min.js"></script>

You can find the library in window.UniversalRouter.

How does it look like?

import UniversalRouter from 'universal-router'

const routes = [
  {
    path: '', // optional
    action: () => `<h1>Home</h1>`
  },
  {
    path: '/posts',
    action: () => console.log('checking child routes for /posts'),
    children: [
      {
        path: '', // optional, matches both "/posts" and "/posts/"
        action: () => `<h1>Posts</h1>`
      },
      {
        path: '/:id',
        action: (context) => `<h1>Post #${context.params.id}</h1>`
      }
    ]
  }
]

const router = new UniversalRouter(routes)

router.resolve('/posts').then(html => {
  document.body.innerHTML = html // renders: <h1>Posts</h1>
})

Play with an example on JSFiddle,
CodePen,
JS Bin in your browser or try
RunKit node.js playground.

Documentation

Books and Tutorials

🎓 ES6 Training Course
by Wes Bos
📗 You Don’t Know JS: ES6 & Beyond
by Kyle Simpson (Dec, 2015)
📄 You might not need React Router
by Konstantin Tarkus
📄 An Introduction to the Redux-First Routing Model
by Michael Sargent
📄 Getting Started with Relay Modern for Building Isomorphic Web Apps
by Konstantin Tarkus

Browser Support

We support all ES5-compliant browsers, including Internet Explorer 9 and above,
but depending on your target browsers you may need to include
polyfills for
Map,
Promise and
Object.assign
before any other code.

For compatibility with older browsers you may also need to include polyfills for
Array.isArray
and Object.create.

Contributing

Anyone and everyone is welcome to
contribute to this project.
The best way to start is by checking our open issues,
submit a bug report or
feature request,
participate in discussions, upvote or downvote the issues you like or dislike, send pull
requests.

Support

#universal-router on Gitter —
Watch announcements, share ideas and feedback.
GitHub Issues —
Check open issues, send feature requests.
@koistya on Codementor,
HackHands
or Skype — Private consulting.

Related Projects

React Starter Kit —
Boilerplate and tooling for building isomorphic web apps with React and Relay.
Node.js API Starter Kit —
Boilerplate and tooling for building data APIs with Docker, Node.js and GraphQL.
ASP.NET Core Starter Kit —
Cross-platform single-page application boilerplate (ASP.NET Core, React, Redux).
Babel Starter Kit —
Boilerplate for authoring JavaScript/React.js libraries.
React App SDK —
Create React apps with just a single dev dependency and zero configuration.
React Static Boilerplate —
Single-page application (SPA) starter kit (React, Redux, Webpack, Firebase).
History —
HTML5 History API wrapper library that handle navigation in single-page apps.
Redux-First Routing —
A minimal, framework-agnostic API for accomplishing Redux-first routing.