React Journey: Part 3 — React Routes

You have to stick to the route to reach your destination. In this article we will explore about the react-router-dom package to create routing in React.

Let us continue our journey with React and understand how to make routes. This one will be straight forward and simple as we have to create bunch of routable components. The complexity arrives when we do authorized routes, but that we will keep for future. Routing is not something comes from within React, for routing we will be needing a third-party package, out of many the most suitable is React Router Dom and the NPM link can be found here.

We will head in this direction:

• Install React Router Dom
• Create Pages — Home, About, Not Found
• Configure Router and Routes
• Use Links and NavLinks
• Use Hook for Navigation

Install React Router Dom

For our Notesy app we will have 2 pages, one is Home and another one will be About page. Along with this will have one not found page in case user enters some invalid page name direct on browser’s URL. But before these we first go with the installation.

Without further ado install the react-router-dom package by running below command in the terminal.