A simple middleware-style router for isomorphic JavaScript web apps
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
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
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
.
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.
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
.
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.
Become a sponsor and get your logo on our README on Github with a link to your site.
[Become a sponsor]
Support us with a monthly donation and help us continue our activities.
[Become a backer]
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