Browser History Monitor

Build a simple React application that monitors and logs browser history changes made through URL query parameters.

Requirements

Create a component that tracks navigation events to demonstrate understanding of how query parameter state management integrates with browser history APIs. The application should:

1. Manage a counter value stored in the URL query string
2. Create proper browser history entries when the counter changes
3. Detect and log all navigation events, including those triggered by browser back/forward buttons
4. Display the navigation method (push or replace) for each change

Specifications

Counter Component

Create a Counter component that:

• Manages a count query parameter (integer type) with default value of 0
• Displays the current count value
• Provides an "Increment" button that increases count by 1 using push history mode
• Provides a "Reset" button that sets count to 0 using replace history mode
• Shows the current URL query string

History Monitor Component

Create a HistoryMonitor component that:

• Tracks all navigation events, including external ones (browser back/forward buttons)
• Displays each event in a list showing: timestamp, navigation type (push/replace), and the count value
• Updates automatically when browser back/forward buttons are used
• Shows the total number of entries in browser history

Test Cases

• Clicking "Increment" updates count and creates a new history entry with push mode @test
• Clicking "Reset" updates count to 0 using replace mode @test
• Browser back button navigation triggers history monitor update @test
• History monitor displays all navigation events in order @test

Implementation

@generates

API

import React from 'react';

/**
 * Counter component that manages count state in URL with history integration
 */
export function Counter(): React.ReactElement;

/**
 * Monitors and displays browser history navigation events
 */
export function HistoryMonitor(): React.ReactElement;

Dependencies { .dependencies }

nuqs { .dependency }

Provides URL state management with browser history API integration.

@satisfied-by

React { .dependency }

Provides the component framework.

@satisfied-by