Nearby lessons

27 of 43

🛣️ ReactJS – React Router

📌 What is React Router?

What is React Router?

React Router is a standard library for routing in React. It enables navigation between different views of components in a React application, allows changing the browser URL, and keeps the UI in sync with the URL.

React Router works on the web, server-side (Node.js), and even React Native. It provides unique URLs for components and makes UI easily shareable.

📌 Pre-requisites

  • Function based components
  • State & Props
  • Arrow functions
  • JSX
  • React Hooks

⚙️ What is Routing?

  • Routing is the mechanism by which requests (defined by URL & HTTP method) are routed to the code that handles them.
  • In React, it allows switching between views/components dynamically.
  • React Router helps to sync the UI with the URL.

🚀 Installing & Setup React Router

Follow these steps to create a React app and setup routing:

  1. npm create vite@latest hello-router-dom
  2. cd hello-router-dom
  3. npm install
  4. npm i react-router-dom
  5. npm run dev

🛠️ Configure Routes

We need three main components from react-router-dom:

  • BrowserRouter – Wraps the App for routing
  • Routes – A container for all routes
  • Route – Defines the path and its component
Example05
Loading editor…

🧠 Test Your Knowledge

5 Questions
Progress: 0 / 5