useRewriteURL Hook

The useRewriteURL hook is designed to manage localised URL rewrites on the client-side. It automatically detects if the current URL should be corrected to a "pretty" localised version based on the user's locale and the rewrite rules defined in intlayer.config.ts.

Unlike standard navigation, this hook uses window.history.replaceState to update the URL in the address bar without triggering a full page reload or a router navigation cycle.

Usage

Simply call the hook from a client-side component.

import { useRewriteURL } from "react-intlayer";

const MyComponent = () => {
  // Automatically corrects /fr/tests to /fr/essais in the address bar if a rewrite rule exists
  useRewriteURL();

  return <div>My Component</div>;
};

How it works

1. Detection: The hook monitors the current window.location.pathname and the user's locale.
2. Matching: It uses the internal Intlayer engine to check whether the current pathname matches a canonical route that has a prettier localised alias for the current locale.
3. URL Correction: If a better alias is found (and it differs from the current path), the hook calls window.history.replaceState to update the browser URL while preserving the same canonical content and state.

Why use it?

• SEO: Ensures that users always land on the single, authoritative pretty URL for a given language.
• Consistency: Prevents inconsistencies where a user might manually type a canonical path (like /fr/privacy-notice) instead of the localised version (/fr/politique-de-confidentialite).
• Performance: Updates the address bar without triggering unwanted router side effects or component remounts.