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
✓ 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
Using npm:
$ npm install universal-router --save
Or using a CDN like unpkg.com with the following script tag:
<script src="https://unpkg.com/[email protected]/universal-router.min.js"></script>
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.
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
.
🎓 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
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]
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
- 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
- #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
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.
Copyright © 2015-present Kriasoft, LLC. 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 (frenzzy) and contributors