React Router — React Technical Interview Questions & Answers

React Router

React Router

  • React Router keeps the URL in sync with which component is on screen, without a full page reload. Wrap the app in BrowserRouter. Use <Link to="/about"> for in-app jumps — not <a href="/about">, which reloads and wipes React state. Declare screens with <Routes> and <Route path="/about" element={<About />} />.
  • Nested routes let a layout keep the sidebar while the middle changes. useParams() reads /users/:id. useNavigate() jumps after login: navigate('/dashboard', { replace: true }) so the back button does not return to the login form. useSearchParams() is for ?q=asha filters.
  • Let’s click About on the board. URL becomes /about. About component paints. Home unmounts. Cart state in a parent still alive if that parent did not unmount. Click a raw <a href="/about"> instead → full load, cart empty. That contrast is the router viva.
  • Deploy trap belongs with BrowserRouter: refresh on /about must not 404. The server (or host rewrite) should serve index.html for unknown paths. HashRouter (/#/about) avoids that but looks uglier. Say both.
  • Trap: wrapping every tiny widget in its own Router. Trap: <a> for internal links. Trap: forgetting a * splat or a NotFound route. Trap: putting BrowserRouter below a component that needs useNavigate (hook must run under the router).
  • React Router — click About → URL /about, screen About. No full page reload. Link, not <a> for in-app.
  URL /about
      │ BrowserRouter
      ▼
  <Route> → About
      │ Link
      ▼
  no full reload

Technical Interview Tip: BrowserRouter + Link + Route element.

Code Examples for React Router

Example

// React Router
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() { return <h1>Home</h1>; }
function About() { return <h1>About</h1>; }

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

React Router — click About → URL /about, screen About. No full page reload. Link, not <a> for in-app.

How to Explain React Router to an Interviewer

Why Link instead of <a>?

No full reload

Which component reads :id?

useParams