Itroduction To React Router

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.

React Router

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.

React Routing

  • 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 is a fully-featured client and server-side routing library for React, a JavaScript library for building user interfaces.
  • 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.

Download Notes Of This Blog, From The Link Given Below.

Download Source Code Of This Blog, From The Link Given Below.

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *