How does the magic of a React Router “ work internally?

React Router’s <Outlet/> still feels like magic to me, after having used React for many years. How does it work under the hood, how does it plug in your nested routes to the right spot (under the hood, at a high level)?

This is as far as my incomplete understanding:

import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Dashboard />}>
          {/* Nested routes */}
          <Route path="posts" element={<BlogPostsPage />} />
          <Route path="about" element={<AboutPage />} />
        </Route>
      </Routes>
    </Router>
  );
}

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

function BlogPostsPage() {
  return (
    <h1>Posts Admin</h1>
  );
}

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

function Sidebar() {
  return (
    <nav>
      <ul>
        <li><a href="/">Dashboard</a></li>
        <li><a href="/posts">Posts</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  );
}

export default App;

Here, the <Outlet /> renders whichever child route matches the current URL, right inside the Dashboard component. But how does that work?

Is this saying, for some reason, that several routes are matched if I visit /posts?

• Why doesn’t it just render the BlogPostsPage and that’s it? Why will it render first the Dashboard page, and then embed the BlogPostsPage inside the <Outlet/> of the Dashboard?
• How does React internally figure this out (at a high level)?

It’s possible to have nested <Outlet/>s it seems:

import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Dashboard />}>
          <Route path="posts" element={<BlogPostsPage />}>
            {/* Nested routes for BlogPostsPage */}
            <Route path=":postId" element={<PostDetail />} />
            <Route path="create" element={<CreatePost />} />
          </Route>
          <Route path="about" element={<AboutPage />} />
        </Route>
      </Routes>
    </Router>
  );
}

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

function BlogPostsPage() {
  return (
    <div>
      <h1>Posts Admin</h1>
      <Outlet /> {/* This Outlet will render nested routes like PostDetail or CreatePost */}
    </div>
  );
}

function PostDetail() {
  return (
    <h2>Post Detail</h2>
  );
}

function CreatePost() {
  return (
    <h2>Create New Post</h2>
  );
}

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

function Sidebar() {
  return (
    <nav>
      <ul>
        <li><a href="/">Dashboard</a></li>
        <li><a href="/posts">Posts</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/posts/create">Create Post</a></li>
      </ul>
    </nav>
  );
}

export default App;

How does this work internally at a high level? How does it know how and when to plug things into the outlet?

Just looking to clarify my understanding of the <Outlet/> concept, because as of right now, it is pure magic to me.