🚀 React Router – Simple & Practical Explanation (Beginner Friendly)

🔹 What is React Router?

React Router is a standard library used to handle navigation and routing in React apps.

It helps to:

✔ Navigate between pages without reload

✔ Show different components for different URLs

✔ Handle dynamic routes (example: /user/101)

🔹 Installation

npm install react-router-dom        

🔹 Basic Setup

Wrap your app with BrowserRouter.

import { BrowserRouter } from "react-router-dom";

function Main() {
  return (
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
}        

🔹 Defining Routes

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

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

➡ / → Home

➡ /about → About

🔹 Navigation using Link

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

<Link to="/about">Go to About</Link>        

👉 No page reload happens.

🔹 Programmatic Navigation (useNavigate)

import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate("/dashboard")}>
      Login
    </button>
  );
}
        

🔹 Dynamic Routes (URL Params)

<Route path="/user/:id" element={<User />} />        

import { useParams } from "react-router-dom";

function User() {
  const { id } = useParams();
  return <h3>User ID: {id}</h3>;
}        

➡ /user/42 → id = 42

🔹 Nested Routes

Nested Routes allow you to render child pages inside a parent route without reloading the page.<Outlet /> acts as a placeholder where the nested route component (like Profile) will be displayed.

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

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

function Dashboard() {
  return (
    <>
      <h2>Dashboard</h2>
      <Outlet />
    </>
  );
}        

🔹 404 Page (Not Found)

<Route path="*" element={<h2>404 Page Not Found</h2>} />        

🔹 Important Hooks (Interview Ready)

• useNavigate() – redirect programmatically
• useParams() – read URL parameters
• useLocation() – access current route info

🔹 One-Line Interview Answer

React Router enables navigation in Single Page Applications without reloading the page.

💡 Tip: If you understand Routes + Link + useNavigate, you already know 80% of React Router.

#ReactJS #ReactRouter #FrontendDevelopment #WebDevelopment #JavaScript #BeginnerFriendly #InterviewPrep