In this post, you will learn the proper way to setup routing in a React application. You will use the popular React-Router library. It’s worth noting that this library has three versions:

• react-router: the core library
• react-router-dom: a variant of the core library meant to be used for web applications
• react-router-native: a variant of the core library used with react native in the development of Android and iOS applications.

We are going to create a project using create-react-app. It is very simple all we need to do is run this comand in our terminal:

npx create-react-app routing-app-demo

Now we need to install the react-router-dom library inside of our project:

npm install react-router-dom

The folowing thing you need to do is delete the App.css and index.css files and remove the imports.

We are going to create three components called PageOne, PageTwo and NavBar:

then you need to add this code to App.js:

Now you only need to run npm start and thats it, job done, now you can navigate between three components using the react router.