universal-router
v9.2.1
Published
Isomorphic router for JavaScript web applications
Downloads
57,564
Readme
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