This library includes three main component types.Ĭalled “Router” in the official documentation and the package, these are actually wrappers. If you know how to think in react, you know how to use the library already.īefore we start coding the app, let’s familiarize ourselves with the library react-router-dom. In my opinion, react-router-dom is a great invention (and the only option available) to handle the browser routes in React. You can save it and share it with friends too. Instead of the local environment, here you have a virtual one. It’s the same process as doing in the local machine.

If you aren’t familiar with it, you can learn more from the create-react-app getting started guide. The first option is by using create-react-app to get started (Not used in this tutorial). To get started, first, let’s create a React app. In this guide, we will be using the latest version (5.1.2) of the react-router-dom library, which includes DOM bindings for the react-router library. In this article, I’ll explain how I created a simple app using React Routing. For this, I used a learning-by-doing method. The first thing I did was to learn how to use the React Router. Wow! Creating the app was 1000 times easier than earlier, and no headaches 🤗 (That’s why 800k+ repositories use this router). Finally, I understood that it’s one of the biggest mistakes I did in 2019.įor the first single-page app I created in 2020, I decided to use the React Router. While creating this, I tried to create my own routing library using onpopstate, window.history, etc ( PLEASE DON’T DO THAT). After learning React core concepts, I created my first production React application. However, lately, I’m much into React because it makes creating interactive UIs painless. This tutorial explains how I created a simple app using React Routing.Īs a full-stack developer, I was used to jQuery for front-end development.

Create a 404 route using react router