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:
npm create vite@latest hello-router-domcd hello-router-domnpm installnpm i react-router-domnpm 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 QuestionsProgress: 0 / 5