Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kriasoft/universal-router

A simple middleware-style router for isomorphic JavaScript web apps
https://github.com/kriasoft/universal-router

react reactjs router routes routing server-side-rendering single-page-app spa ssr vuejs

Last synced: about 2 months ago
JSON representation

A simple middleware-style router for isomorphic JavaScript web apps

Awesome Lists containing this project

README 

        
# Universal Router



[![NPM version](https://img.shields.io/npm/v/universal-router.svg)](https://www.npmjs.com/package/universal-router)

[![NPM downloads](https://img.shields.io/npm/dw/universal-router.svg)](https://www.npmjs.com/package/universal-router)

[![Library Size](https://img.shields.io/bundlephobia/minzip/universal-router.svg)](https://bundlephobia.com/result?p=universal-router)

[![Online Chat](https://badges.gitter.im/kriasoft/universal-router.svg)](https://gitter.im/kriasoft/universal-router)





  Visit Universal Router Website




A simple middleware-style router that can be used in both client-side and server-side applications.



Visit **[Quickstart Guide](http://slides.com/koistya/universal-router)** (slides)  | 

Join **[#universal-router](https://gitter.im/kriasoft/universal-router)** on Gitter to stay up to date



## Features



- It has [simple code](https://github.com/kriasoft/universal-router/blob/master/src/UniversalRouter.ts)

  with only single [path-to-regexp](https://github.com/pillarjs/path-to-regexp) dependency.

- It can be used with any JavaScript framework such as

  [React](https://reactjs.org/), [Vue](https://vuejs.org/), [Hyperapp](https://hyperapp.dev/) etc.

- It uses the same middleware approach used in [Express](http://expressjs.com/) and [Koa](http://koajs.com/),

  making it easy to learn.

- It supports both [imperative](https://en.wikipedia.org/wiki/Imperative_programming) and

  [declarative](https://en.wikipedia.org/wiki/Declarative_programming) routing style.

- Routes are plain JavaScript

  [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer)

  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](https://twitter.com/wincent/status/862115805378494464) 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](https://www.reddit.com/r/reactjs/comments/5xhw3o#form-t1_dejkw4p367)

> by **@everdimension**



## Installation



Using [npm](https://www.npmjs.com/package/universal-router):



```bash

npm install universal-router --save

```



Or using a [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) like

[unpkg.com](https://unpkg.com/universal-router/universal-router.min.js) or

[jsDelivr](https://cdn.jsdelivr.net/npm/universal-router/universal-router.min.js)

with the following script tag:



```html



```



You can find the library in `window.UniversalRouter`.



## How does it look like?



```js

import UniversalRouter from 'universal-router'



const routes = [

  {

    path: '', // optional

    action: () => `
Home
`

  },

  {

    path: '/posts',

    action: () => console.log('checking child routes for /posts'),

    children: [

      {

        path: '', // optional, matches both "/posts" and "/posts/"

        action: () => `
Posts
`

      },

      {

        path: '/:id',

        action: (context) => `
Post #${context.params.id}
`

      }

    ]

  }

]



const router = new UniversalRouter(routes)



router.resolve('/posts').then(html => {

  document.body.innerHTML = html // renders: 
Posts


})

```



Play with an example on [JSFiddle](https://jsfiddle.net/frenzzy/b0w9mjck/102/),

[CodePen](https://codepen.io/frenzzy/pen/aWLKpb?editors=0010),

[JS Bin](https://jsbin.com/kaluden/3/edit?js,output) in your browser or try

[RunKit](https://runkit.com/frenzzy/universal-router-demo) node.js playground.



## Documentation



- [Getting Started](https://github.com/kriasoft/universal-router/blob/master/docs/getting-started.md)

- [Universal Router API](https://github.com/kriasoft/universal-router/blob/master/docs/api.md)



## Books and Tutorials



- 🎓 **[ES6 Training Course](https://es6.io/friend/konstantin)**

  by [Wes Bos](https://twitter.com/wesbos)

- 📗 **[You Don't Know JS: ES6 & Beyond](http://amzn.to/2bFss85)**

  by [Kyle Simpson](https://github.com/getify) (Dec, 2015)

- 📄 **[You might not need React Router](https://medium.freecodecamp.org/38673620f3d)**

  by [Konstantin Tarkus](https://twitter.com/koistya)

- 📄 **[An Introduction to the Redux-First Routing Model](https://medium.freecodecamp.org/98926ebf53cb)**

  by [Michael Sargent](https://twitter.com/michaelksarge)

- 📄 **[Getting Started with Relay Modern for Building Isomorphic Web Apps](https://hackernoon.com/ae049e4e23c1)**

  by [Konstantin Tarkus](https://twitter.com/koistya)



## 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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map),

[`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) and

[`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)

before any other code.



For compatibility with older browsers you may also need to include polyfills for

[`Array.isArray`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray)

and [`Object.create`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create).



## Contributing



Anyone and everyone is welcome to

[contribute](https://github.com/kriasoft/universal-router/blob/master/.github/CONTRIBUTING.md) to this project.

The best way to start is by checking our [open issues](https://github.com/kriasoft/universal-router/issues),

submit a [bug report](https://github.com/kriasoft/universal-router/blob/master/.github/CONTRIBUTING.md#bugs) or

[feature request](https://github.com/kriasoft/universal-router/blob/master/.github/CONTRIBUTING.md#features),

participate in discussions, upvote or downvote the issues you like or dislike, send [pull

requests](https://github.com/kriasoft/universal-router/blob/master/.github/CONTRIBUTING.md#pull-requests).



## Support



- [#universal-router](https://gitter.im/kriasoft/universal-router) on Gitter —

  Watch announcements, share ideas and feedback.

- [GitHub Issues](https://github.com/kriasoft/universal-router/issues) —

  Check open issues, send feature requests.

- [@koistya](https://twitter.com/koistya) on [Codementor](https://www.codementor.io/koistya),

  [HackHands](https://hackhands.com/koistya/)

  or [Skype](https://hatscripts.com/addskype?koistya) — Private consulting.



## Related Projects



- [React Starter Kit](https://github.com/kriasoft/react-starter-kit) —

  Boilerplate and tooling for building isomorphic web apps with React and Relay.

- [Node.js API Starter Kit](https://github.com/kriasoft/nodejs-api-starter) —

  Boilerplate and tooling for building data APIs with Docker, Node.js and GraphQL.

- [ASP.NET Core Starter Kit](https://github.com/kriasoft/aspnet-starter-kit) —

  Cross-platform single-page application boilerplate (ASP.NET Core, React, Redux).

- [Babel Starter Kit](https://github.com/kriasoft/babel-starter-kit) —

  Boilerplate for authoring JavaScript/React.js libraries.

- [React App SDK](https://github.com/kriasoft/react-app) —

  Create React apps with just a single dev dependency and zero configuration.

- [React Static Boilerplate](https://github.com/kriasoft/react-static-boilerplate) —

  Single-page application (SPA) starter kit (React, Redux, Webpack, Firebase).

- [History](https://github.com/ReactTraining/history) —

  HTML5 History API wrapper library that handle navigation in single-page apps.

- [Redux-First Routing](https://github.com/mksarge/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](https://opencollective.com/universal-router#sponsor)]





  





  





  





  





  





  





  





  





  





  




## Backers



Support us with a monthly donation and help us continue our activities.

[[Become a backer](https://opencollective.com/universal-router#backer)]





  





  





  





  





  





  





  





  





  





  




## License



Copyright © 2015-present Kriasoft.

This source code is licensed under the MIT license found in the

[LICENSE.txt](https://github.com/kriasoft/universal-router/blob/master/LICENSE.txt) file.

The documentation to the project is licensed under the

[CC BY-SA 4.0](http://creativecommons.org/licenses/by-sa/4.0/) license.



---



Made with ♥ by

[Konstantin Tarkus](https://github.com/koistya)

([@koistya](https://twitter.com/koistya), [blog](https://medium.com/@tarkus)),

[Vladimir Kutepov](https://github.com/frenzzy)

and [contributors](https://github.com/kriasoft/universal-router/graphs/contributors)