---
title: SPA Routing Architecture
description: Understand the HashRouter implementation in the Customer SPA and why it's used.
---

WooNooW relies on a **Hybrid by Default** architecture with React SPA islands. To avoid conflicting with native WordPress rewrite rules and to provide a seamless frontend experience, the Customer SPA uses `HashRouter` instead of the traditional `BrowserRouter`.

## Why HashRouter?

When a customer navigates the WooNooW Customer SPA (e.g., Shop, Cart, Checkout, or My Account), the routing happens entirely on the client side without triggering full page reloads or conflicting with WordPress.

**URL Format:**
```
Shop:     https://example.com/shop#/
Product:  https://example.com/shop#/product/product-slug
Cart:     https://example.com/shop#/cart
Checkout: https://example.com/shop#/checkout
Account:  https://example.com/shop#/my-account
```

### How It Works

1. **WordPress Load**: WordPress handles the initial request (e.g., `/shop`) and renders the SPA container.
2. **React Takes Over**: The React application reads the route after the `#` (e.g., `#/product/product-slug`) and renders the appropriate component.
3. **No Conflicts**: Anything after the hash `#` is ignored by the server, ensuring zero 404 errors or conflicts with existing WordPress canonical redirects.

## Benefits

*   **Zero Server Config**: No complex `.htaccess` or NGINX rewrite rules required.
*   **Shareable Links**: Hash routes can be shared in email campaigns or social media.
*   **Direct URL Access**: Users can directly paste a URL or bookmark a page and the SPA will load perfectly.

## Developer Rules

When building custom frontend extensions or working with the Customer SPA:

1.  **Always use `HashRouter`** for the Customer SPA.
2.  **Use React Router `Link` components** to ensure links automatically use hash URLs.
3.  **Never use `BrowserRouter`**, as it will cause immediate conflicts with WordPress routing.
4.  **Never try to override WordPress routes**; rely on the hash for internal SPA navigation.

## SEO Considerations

While HashRouter URLs are primarily for the SPA experience, WooCommerce product pages still exist in the background. Search engines index the actual product URLs, and canonical tags ensure SEO equity is maintained while providing the fast SPA experience to actual users.
