Scribd
Upload
4 views3 pages

React Router Full Explanation

React Router is a library that facilitates routing in React applications, allowing navigation between components without reloading the page. It utilizes the browser's History API to manage URL changes and supports dynamic routes, enhancing user experience. Key components include BrowserRouter, Routes, Route, Link, and hooks like useNavigate and useParams for navigation and accessing dynamic URL values.

Uploaded by

kishorekumar63794
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views3 pages

React Router Full Explanation

React Router is a library that facilitates routing in React applications, allowing navigation between components without reloading the page. It utilizes the browser's History API to manage URL changes and supports dynamic routes, enhancing user experience. Key components include BrowserRouter, Routes, Route, Link, and hooks like useNavigate and useParams for navigation and accessing dynamic URL values.

Uploaded by

kishorekumar63794
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

React Router - Full Explanation

React Router is a library that allows you to add routing (page navigation) to a React
application. In a normal HTML site, each page is a separate .html file and clicking a link
reloads the entire page. In a React app, you usually have only one HTML file (index.html),
and all “pages” are React components. React Router lets you switch between those
components without reloading the page.

Why is it important?
• Makes navigation faster (no page reload)

• Works like a real website — URL changes in the browser

• Supports browser Back/Forward buttons

• Lets you create dynamic routes (like /product/123)

How it works
React Router uses the browser’s History API (pushState, popState) in BrowserRouter. It
watches for changes in the URL and decides which component to render using Routes and
Route.

Main Components

1) BrowserRouter
Purpose: The main wrapper that enables routing.

Analogy: Like installing the “road network” for your app.

Example:
<BrowserRouter>
{/* All routing logic goes here */}
</BrowserRouter>

2) Routes
Purpose: Holds all your <Route>s.

Analogy: A switchboard — it connects the URL to the right component.

Example:
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
3) Route
Purpose: Defines a URL path and the component to show for that path.

Props:
- path → URL to match
- element → Component to render

Example:
<Route path="/contact" element={<Contact />} />

4) Link
Purpose: Navigation without reload.

Example:
<Link to="/about">About Us</Link>

5) useNavigate (Hook)
Purpose: Navigate in JavaScript after events like form submission.

Example:
const navigate = useNavigate();
<button onClick={() => navigate("/home")}>Go Home</button>

6) useParams (Hook)
Purpose: Get dynamic URL values.

Example:
<Route path="/user/:id" element={<UserProfile />} />
const { id } = useParams();

Basic Example App


import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link> |
<Link to="/about">About</Link> |
<Link to="/contact">Contact</Link>
</nav>

<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</BrowserRouter>
);
}

export default App;

Tamil Explanation
React Router என்பது React-க்கு ஒரு Routing Library. இது Single Page Application-இல்
பல பக்கங்களை (components) URL மூலம் மாற்றி காட்ட உதவும். பக்கம் reload
ஆகாது; URL மட்டும் மாறும். Browser history, back button, forward button எல்லாம்
வேலை செய்யும்.

You might also like