Routing in React SPAs without React-Router

A Multi-Article Series


React-Router is the most popular routing solution out there for React applications – so much so, that a lot of developers think of it as the 'Official Routing Solution' for React. However, React-Router tends to complicate development, and if I have the option I always avoid using it. In this series of articles, I'll talk about how I perform routing in React Single Page Applications, without using React-Router. I will be using 'BlueJacket', a tiny little 125LOC router I first wrote a couple of years ago.

This is a completed series of articles. If you have any questions, or wish to share your thoughts, please write to me at asleepysamurai at google's mail service.


[Part 1] Routing in React SPAs without React-Router

28th of December, 2018

I use a homegrown router to perform routing in my React Single Page Applications, because React-Router keeps getting in my way. In this article, I'll explain how the application is structured, where data load API calls are made, and how to render a component on the page.

[Part 2] Routing in React SPAs without React-Router

30th of December, 2018

In this article, I'll continue to build out the rest of the Twitter-Clone application, and we'll render the remaining two views. We'll also see how to get BlueJacket to handle the routing when links are clicked.

[Part 3] Routing in React SPAs without React-Router

3rd of January, 2019

In this article, we'll figure out how to add components like a header or a footer, which are rendered on all pages without having to include the component seperately in each view. We'll also see how to redirect to a default route.