Integrate Routing in Typescript project with React-Router v5.2.0. Including Redux toolkit integration. 2020 ReactJS example tutorial.

In this tutorial, we will be integrating a common element that is needed in most websites out there — routing. I will be integrating react-route v5.2.0 on a ReactJS typescript project.

Additionally, I will be showing you advanced topics of integrating the Redux Toolkit into the mix.

You can see the final application we will be building in the Figure below, or see it live on my site here.

Why do I need a Router anyway, isn’t React is all about a single-page paradigm?

Most applications need multiple views in React’s single-page application paradigm. Even if right now your application is based on one single main component, in the future that may change, so it’s better to integrate the code at the early stages of your project.

Building an application on a single component is not ideal as the code and complexity grow it can become a developer nightmare to maintain and test.