useRewriteURL Hook

The useRewriteURL hook for SolidJS is designed to manage localized URL rewrites on the client side. It automatically corrects the browser's URL to its "pretty" localized version based on the current locale and the configuration in intlayer.config.ts.

By using window.history.replaceState, it avoids redundant Solid Router navigations.

Usage

Call the hook within a component that is part of your application.

import { useRewriteURL } from "solid-intlayer";

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

  return <>{props.children}</>;
};

How it works

1. Detection: The hook uses createEffect to monitor changes in the reactive locale().
2. Matching: It identifies if the current window.location.pathname corresponds to a canonical route that has a prettier localized alias for the current language.
3. URL Correction: If a prettier alias is found, the hook calls window.history.replaceState to update the address bar without affecting the internal navigation state or causing component re-renders.

Why use it?

• Authoritative URLs: Enforces a single URL for each localized version of your content, which is crucial for SEO.
• Developer Convenience: Allows you to keep your internal route definitions canonical while exposing user-friendly, localized paths to the outside world.
• Consistency: Corrects URLs when users manually type a path that doesn't follow your preferred localization rules.