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
- It can be used with any JavaScript framework such as
- It supports both imperative and
- Routes are plain JavaScript
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
by Wes Bos by Kyle Simpson (Dec, 2015) by Konstantin Tarkus by Michael Sargent by Konstantin TarkusBrowser 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>) forMap
,
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 —
- @koistya on Codementor,
Related Projects
Boilerplate and tooling for building isomorphic web apps with React and Relay. Boilerplate and tooling for building data APIs with Docker, Node.js and GraphQL. Cross-platform single-page application boilerplate (ASP.NET Core, React, Redux). Boilerplate for authoring JavaScript/React.js libraries. Create React apps with just a single dev dependency and zero configuration. Single-page application (SPA) starter kit (React, Redux, Webpack, Firebase).- History —
Sponsors
Become a sponsor and get your logo on our README on Github with a link to your site. Become a sponsorBackers
Support us with a monthly donation and help us continue our activities. Become a backerLicense
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