In This Blog, you will learn about the most useful react Library called “React Router”. It helps to understand the concept of Routing in React Application. there are lots of concepts in this React Router library and also we will learn how to install and add React Router library in our react app.
In React JS, React Router is a standard library for routing in React.
What is Routing ?
In Web, Routing is the mechanism by which requests (as specified by a URL and HTTP method) are routed to the code that handles them.
- In React JS, It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.
- In React JS, React Router runs anywhere React runs; on the web, on the server with node.js, and on React Native.
- Create React App doesn’t include page routing by default.
- React Router is the most popular solution.
- It provides unique URLs for different components in the app and makes UI easily shareable with other users.
Topics In React Routing
- Configuring Routes
- Navigating on button click
- Navigating programmatically
- Dynamic routes
- Nested routes
- Route Parameters
- And much more.
Installing React Router In React App
- 1st Step:
- Create react app by using this command below:
- create-react-app “App_Name”
- Installing create-react-app command below:
- npm install –g create-react-app
- 2nd Step:
- Install React Router by using npm, command below:
- npm i react-router-dom
- Note: This tutorial uses React Router v6.
- If you are upgrading from v5, you will need to use the @latest flag:
- npm i react-router-dom@latest
After Installing React Router library, it will added in package.json file as dependency.