What is React Router, Why use it and How to use it ?
What is React Router?
React router is a fully featured client and server side routing library for ReactJS.
It is used to create links between web-pages and components in React and to navigate between Urls that make up a web application. In other words lets us create unique URL’s (Routes) to different React components in the app and makes a cleaner and easy to share User Interface (UI)
React Router package is mostly required and comes in handy when you’re building a medium to large scale React application.
In this tutorial lessons, you’ll learn everything you need to know to work effectively with React Router.
Here I will be using React router 6 which is the latest iteration of React Router and has a bit of syntax changes.
Prerequisites to learn React Router 6 — Before we start, to follow the series, it is expected you know the fundamentals of React JS as well as React Hooks.
How to Install and Setup React Router in ReactJS
Step-1 — Create a React app.
Firstly head to your terminal and navigate to the directory where you want to create a react app.
This will generate a project with several boilerplate codes which comes with the React library. Navigate to the directory by
Step-2 Install react-router
Using npm package manager:
This should install the latest version of React Router, which is currently React Router 6. To see the version installed, check the package.json file in the react project.
How to Configure Routes in ReactJS with React Router
After we have setup our app and dependencies we can open the/src/index.js
Import BrowserRouterfrom react-router-domnear the top of your file and wrap your app in a <BrowserRouter>
Now we can use React router anywhere in our app, open /src/App.js and replace the default markup with some routes:
This is where we create two components in /src/components
/Home.js
/About.js
Run your app and the http://localhost:3000/ should give you the Home Page and http://localhost:3000/about should give you the About Page
Here we go. You have setup the basic React Router. Import and use the Link Tags to be able to create hyperlinks to different endpoints in your React App.
