What is React Router?

Brief Answer

React Router — library for navigating between pages in React applications 🧭 Allows creating SPA (Single Page Applications) with different URLs.

// Main components:
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

Full Answer

React Router — like a car navigator: shows where you are now and how to get to other places! 🚗🗺️

Why React Router is Needed

Regular websites — like a book: navigating between pages reloads everything:

// ❌ Regular site — page reload
// example.com/ → example.com/about (full reload)

React applications — like one page with different rooms:

// ✅ React Router — no reload
// example.com/ → example.com/about (only content changes)

Main Components

BrowserRouter — the foundation

// Wraps the entire application
<BrowserRouter>
  <App />
</BrowserRouter>

Routes and Route — pages

// Defines what to show on different paths
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/contacts" element={<Contacts />} />
</Routes>

// Instead of <a href> to avoid page reload
<Link to="/about">About us</Link>
<Link to="/contacts">Contacts</Link>

How It Works

Simple Example

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

When user:

Clicks link → URL changes
React Router sees new URL
Shows needed component
Page doesn’t reload! ⚡

Dynamic Routes

Pages with parameters

// For product pages, profiles, etc.
<Route path="/user/:id" element={<UserProfile />} />
 
// In component get id:
const {id} = useParams(); // If URL /user/123, then id = "123"

Route Protection

Private pages

// Only for authorized users
<Route 
  path="/profile" 
  element={
    <PrivateRoute>
      <Profile />
    </PrivateRoute>
  } 
/>

Common Mistakes

Forgetting BrowserRouter

// ❌ Mistake — using Route without BrowserRouter
function App() {
  return (
    <Route path="/" element={<Home />} /> // Doesn't work!
  );
}
 
// ✅ Correct — wrap in BrowserRouter
function App() {
  return (
    <BrowserRouter>
      <Route path="/" element={<Home />} />
    </BrowserRouter>
  );
}

Using instead of Link

// ❌ Mistake — reloads page
<a href="/about">About</a>
 
// ✅ Correct — no reload
<Link to="/about">About</Link>

Simple Rules

BrowserRouter — navigation foundation 🏗️
Routes/Route — define pages 🗺️
Link — navigation without reload 🔗
useParams — for dynamic pages 🎯
No reload — fast and convenient ⚡
SPA — single page application 📱

React Router — like doors between rooms: go through and enter the right place! 🚪

Want more articles to prepare for interviews? Subscribe to EasyAdvice, bookmark the site and improve yourself every day 💪