Example 6: Client-Side Router

How It Works

This router uses the native History API to handle navigation without page reloads:

• history.pushState() - Add new entry to history
• popstate event - Detect back/forward navigation
• data-link attribute - Intercept link clicks
• Pattern matching - Support for dynamic routes like /user/:id

Current path: /

History length: 1

Documentation

• MDN: History API
• MDN: popstate event
• Can I Use: History API

Next Step

• Example 7: State Management