The " Matryoshka " Interface

Imagine a control panel (Dashboard). At the top you have a header, on the left — a menu. When you move from " Statistics " to " Settings " , the header and menu shouldn't change or redraw. Only the central part changes. For this, Nested Routes are used.

1. How It Works?

You create a route hierarchy where one route is inside another:

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route path="stats" element={<StatsPage />} />
  <Route path="settings" element={<SettingsPage />} />
</Route>

2. Outlet: " Window " to the Nested World

In the DashboardLayout component, we need to indicate: " Dear React, draw the header here, menu — there, and here, in the middle, draw what comes from the nested route " . For this serves the special component <Outlet />.

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

function DashboardLayout() {
  return (
    <div className="layout">
      <nav>My menu</nav>
      <main>
        {/* Exactly here StatsPage or SettingsPage will be 'inserted' */}
        <Outlet />
      </main>
    </div>
  );
}

3. Query Parameters: Sorting and Filters

Sometimes we don't need to change the entire page, just pass " display settings " . For example: /products?sort=price&color=red. For working with them, there's the useSearchParams hook.

• Why is this needed? If a user configured filters in your store, copied the link and sent to a friend — the friend should see the exact same filtered products. Regular state (useState) can't do this, but URL can.

4. Result: Professional Routing

• Use Route for structure.
• Use Outlet for common layouts (Layouts).
• Use useParams for object IDs.
• Use useSearchParams for filters and search.

Good routing makes SPA indistinguishable from a quality native application. This is the foundation of user convenience.