Need to transform design to code? Don't hardcode it, Avocode it!
See how
GET A FREE MONTH
Code
·
LAST UPDATED
October 5, 2016

Finally a Simple and Universal Router for React.js

Head of Product & Co-founder at Avocode and a former Lead Product Developer and Co-founder at MadebySource.

"I still write code. In fact that's what I love doing most."

How to keep your UI in sync with the URL?

A router is a piece of software that orchestrates the behavior of your user interface when the URL address changes. This accounts both for websites and native apps. Whenever you enter a certain part of the whole web/app structure or interact with it to go somewhere else, the URL changes. However, do you really want to load the new page entirely every time the URL changes? I doubt that.

Why build a “nuclear plant” solution for a simple problem?

At the time when we were rewriting the entire codebase of Avocode from Angular.js to React.js we knew we needed one “universal” router. By universal, I mean one for both the web and native app.

There was a solution, but…

The solution is called React Router. When you look at its code, it kind of looks like it is supposed to run a nuclear plant, not an Electron based app. Additionally, the API changes every half year or so without much support for the previous versions. Imagine that you're building your app with one router and then you have to change it every time the router changes. Simply put, we couldn't take that risk. Instead of using a complicated library full of hacks with over 10 000 lines, we wrote our own with 200 lines.

The result?

We've built a truly universal React Router for web, and Electron or nw.js apps that we continuously support. The main difference to standard routers is that it can change only particular components based on the data you pull. Last but not least, when you plug it into React, it just works. However, please bare in mind that the API interface is not finalized yet and will probably change until it reaches the 1.0 version.

Read more and get it on GitHub

While you're at it, tell us what you think. We'll be happy for your feedback.

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: