Understanding the History API and How React Router Implements It

Router is an essential feature for developing React applications, and this article walks through how React Router is implemented by first exploring the native History API.

The History API provides a stack of visited URLs (history.length) and navigation methods: history.back() , history.forward() , history.go(delta) , as well as state‑changing methods history.pushState(state, title, url) and history.replaceState(state, title, url) . The history.scrollRestoration property controls whether the browser automatically restores the scroll position (auto) or leaves it unchanged (manual).

Using these methods, the article demonstrates how the history stack changes, how pushState can create a new entry while replaceState overwrites the current one, and how navigating with back , forward , or go triggers the popstate event, whereas pushState and replaceState do not.

After covering the History API, the tutorial creates a React project, installs react-router-dom , and shows a complete index.js example that defines components Aaa, Bbb, Ccc, an error page, and a route configuration with a root path and two child routes ( /bbb/:id and /ccc ). The code uses createBrowserRouter and RouterProvider to wire the router into the app:

npx create-react-app react-router-test
npm install react-router-dom
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, Link, Outlet, RouterProvider } from "react-router-dom";
// component definitions and routes array omitted for brevity
const router = createBrowserRouter(routes);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);

Debugging steps are shown using VS Code launch configurations to set breakpoints in createBrowserRouter , revealing that React Router wraps the native History API and focuses on four core methods: listen (popstate listener), push , replace , and go . The router matches the current location against the route configuration via matchRoutes , flattens nested routes, and determines which components to render.

When a Link is clicked, React Router calls navigate , which updates the history with pushState (or replaceState for redirects), triggers a React state update, and re‑renders the matched component tree using Outlet to render child routes. The same flow occurs for browser back/forward actions: the popstate event fires, navigate runs again, and the UI updates accordingly.

The article also notes that React Router supports both object‑based route definitions and JSX‑based Routes / Route components, which are internally converted to the same configuration.

In summary, the tutorial covers:

History API methods and their effects on the navigation stack.

The popstate event for detecting navigation between states.

How React Router builds on these APIs to match routes, manage history, and render components.