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.
Sponsors
Become a sponsor and get your logo on our README on Github with a link to your site.
[Become a sponsor]
Backers
Support us with a monthly donation and help us continue our activities.
[Become a backer]
License
Copyright © 2015-present Kriasoft.
This source code is licensed under the MIT license found in the
LICENSE.txt file.
The documentation to the project is licensed under the
CC BY-SA 4.0 license.
Made with ♥ by
Konstantin Tarkus
(@koistya, blog),
Vladimir Kutepov
and contributors