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:
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.