React Router

🚦 React Router (Complete Beginner-Friendly Guide)

React Router is a library used to handle routing/navigation in React applications. It allows you to move between pages or components without reloading the browser, making apps fast and seamless like SPAs (Single Page Applications).

📦 Install React Router

Run this command in your React project:

🧭 Basic Setup

Modify your App.js to include router components:

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

function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
}

export default App;

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Home from "./Home";

import About from "./About";

import Contact from "./Contact";

function App() {

return (

</Routes>

</Router>

);

}

export default App;

🔗 Navigation with `<Link />`

Use <Link> instead of <a> to avoid page reloads.

🚀 Example Pages

📄 Home.js

📄 About.js

📄 Contact.js

❓ 404 Page (Not Found Route)

➡️ Programmatic Navigation (`useNavigate()`)

Navigate users using JavaScript instead of a link.

🎯 Route Parameters (Dynamic Routes)

Useful for pages like profiles, product details, etc.

Create a dynamic route:

Retrieve parameter:

📩 Passing Data with Query Params

Use:

Get value via:

🧱 Nested Routes

Used for dashboards or sections.

<Route path="/dashboard" element={<Dashboard />}>
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Route>


Inside Dashboard.js:




import { Outlet, Link } from "react-router-dom";

export default function Dashboard() {
return (
<div>
<h2>Dashboard</h2>

<Link to="profile">Profile</Link>
<Link to="settings">Settings</Link>

<Outlet />
</div>
);
}

</Route>

Inside Dashboard.js:

import { Outlet, Link } from "react-router-dom";

export default function Dashboard() {

return (

<div>

<h2>Dashboard</h2>

<Link to="profile">Profile</Link>

<Link to="settings">Settings</Link>

</div>

);

}

⏳ Redirects Using `<Navigate />`

🧠 Summary Table

Feature	Supported
Multiple Pages	✔
Dynamic Routes	✔
Redirects	✔
Nested Routing	✔
Programmatic Navigation	✔
Query Parameters	✔

React Router

🚦 React Router (Complete Beginner-Friendly Guide)

📦 Install React Router

🧭 Basic Setup

🔗 Navigation with `<Link />`

🚀 Example Pages

❓ 404 Page (Not Found Route)

➡️ Programmatic Navigation (`useNavigate()`)

🎯 Route Parameters (Dynamic Routes)

Create a dynamic route:

Retrieve parameter:

📩 Passing Data with Query Params

🧱 Nested Routes

⏳ Redirects Using `<Navigate />`

🧠 Summary Table

🎉 You Now Know React Router!

You may also like...

React Tutorial

React Hook

React Router

🚦 React Router (Complete Beginner-Friendly Guide)

📦 Install React Router

🧭 Basic Setup

🔗 Navigation with <Link />

🚀 Example Pages

❓ 404 Page (Not Found Route)

➡️ Programmatic Navigation (useNavigate())

🎯 Route Parameters (Dynamic Routes)

Create a dynamic route:

Retrieve parameter:

📩 Passing Data with Query Params

🧱 Nested Routes

⏳ Redirects Using <Navigate />

🧠 Summary Table

🎉 You Now Know React Router!

You may also like...

React Forms Multiple Input Fields

React forwardRef

React Conditional Rendering

React Tutorial

React Hook

🔗 Navigation with `<Link />`

➡️ Programmatic Navigation (`useNavigate()`)

⏳ Redirects Using `<Navigate />`