Universal Router

A simple middleware-style router that can be used in both client-side (e.g. React, Vue.js) and server-side applications (e.g. Node.js/Express, Koa).

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

Installation

Using npm:

$ npm install universal-router --save

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

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

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

Browser Support

Universal Router supports all popular browsers, including Internet Explorer 9 and above with polyfills such as es6-shim for Map, Promise and Object.assign that must be included before any other code.

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

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

Backers

♥ Universal Router? Become a backer to show your support and help us maintain and improve this open source project. Get your image on our README with a link to your site.

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

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

Contributing

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

License

Made with ♥ by Konstantin Tarkus (@koistya, blog), Vladimir Kutepov (frenzzy) and contributors

RodrigoTorresWeb / universal-router