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.

Diagram

URL /about
      │ BrowserRouter
      ▼
  <Route> → About
      │ Link
      ▼
  no full reload

Exam tip

BrowserRouter + Link + Route element.

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.

Short notes

DefReact Router maps the URL to a component without a full reload. BrowserRouter + Routes + Route + Link.
RuleUse Link for in-app navigation. <a href> reloads the page and wipes React state.
RememberuseParams for :id, useNavigate after login, server fallback so refresh on /about is not a 404.
UseMulti-page SPA — Home, About, product /p/:id, dashboard after login.
TrapInternal <a>. No NotFound route. useNavigate outside BrowserRouter. Refresh 404 on deploy.
Ex<Link to="/about"> → URL /about → <About />. Cart in a still-mounted parent stays filled.
LearnLink + Route first, then params, then navigate/replace, then nested layout routes.

React Router

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

Diagram

URL /about
      │ BrowserRouter
      ▼
  <Route> → About
      │ Link
      ▼
  no full reload

Exam tip

BrowserRouter + Link + Route element.

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.

Short notes

DefReact Router maps the URL to a component without a full reload. BrowserRouter + Routes + Route + Link.
RuleUse Link for in-app navigation. <a href> reloads the page and wipes React state.
RememberuseParams for :id, useNavigate after login, server fallback so refresh on /about is not a 404.
UseMulti-page SPA — Home, About, product /p/:id, dashboard after login.
TrapInternal <a>. No NotFound route. useNavigate outside BrowserRouter. Refresh 404 on deploy.
Ex<Link to="/about"> → URL /about → <About />. Cart in a still-mounted parent stays filled.
LearnLink + Route first, then params, then navigate/replace, then nested layout routes.

React Router

Example

Short notes

Questions

React Router

Example

Short notes

Questions