SPA Routing Architecture

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.