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