Dokumentation: Funktion comparePaths in intlayer

Beschreibung

Die Funktion comparePaths vergleicht zwei URLs oder Pfade auf Gleichheit und ignoriert dabei das Locale-Segment, das Protokoll/den Host, die Suchanfrage (Query-String), den Hash und abschließende Schrägstriche (Trailing Slashes). Dies ist die empfohlene Methode, um festzustellen, ob ein Navigationslink auf die aktuelle Seite verweist, beispielsweise um den aktiven Link hervorzuheben, ohne dass Sie eine eigene (fehleranfällige) Normalisierungslogik erstellen müssen.

Intern verwendet sie getPathWithoutLocale, um das Locale-Segment zu entfernen, sodass Ihr konfiguriertes Routing-Verfahren und Ihre Locales berücksichtigt werden.

Das Paket exportiert auch den zugrundeliegenden Helper normalizePath, der den kanonischen, Locale-unabhängigen Pfad für den Vergleich zurückgibt.

Hauptmerkmale:

• Locale-unabhängiger Vergleich (/de/about entspricht /about)
• Funktioniert sowohl mit absoluten URLs als auch mit relativen Pfaden
• Ignoriert Query-Strings, Hashes und abschließende Schrägstriche
• Toleriert fehlende führende Schrägstriche und leere Werte (normalisiert zu /)
• Leichtgewichtig, baut auf getPathWithoutLocale auf

Funktionssignatur

comparePaths(
  pathname: string,  // Erforderlich
  href: string,      // Erforderlich
  locales?: Locales[] // Optional
): boolean

normalizePath(
  inputUrl: string,   // Erforderlich
  locales?: Locales[] // Optional
): string

Parameter

• pathname: string

  • Beschreibung: Der erste zu vergleichende URL-String oder Pfad (üblicherweise der aktuelle Pfad).
  • Typ: string
  • Erforderlich: Ja

• href: string

  • Beschreibung: Der zweite zu vergleichende URL-String oder Pfad (üblicherweise das href eines Navigationslinks).
  • Typ: string
  • Erforderlich: Ja

• locales: Locales[]

  • Beschreibung: Optionales Array unterstützter Locales. Standardmäßig die im Projekt konfigurierten Locales.
  • Typ: Locales[]
  • Erforderlich: Nein (Optional)

Rückgabewert

• Typ: boolean
• Beschreibung: true, wenn beide Eingaben auf denselben Locale-unabhängigen Pfad auflösen, ansonsten false.

Anwendungsbeispiel

Grundlegende Nutzung

import { comparePaths } from "intlayer";

comparePaths("/ru/path", "/path"); // true
comparePaths("/ru/path/", "/path"); // true
comparePaths("/ru/path", "/path/"); // true
comparePaths("/ru/", "/"); // true
comparePaths("/ru", "/"); // true
comparePaths("ru/path", "/path"); // true
comparePaths("", "/"); // true
comparePaths("/ru", ""); // true
comparePaths("/ru/path", "/other"); // false

Absolute und relative URLs

import { comparePaths } from "intlayer";

comparePaths("https://example.com/ru/path", "/path"); // true

Hervorheben des aktiven Navigationslinks

import { comparePaths } from "intlayer";
import { useLocation } from "react-router";

const NavLink = ({ href, children }) => {
  const { pathname } = useLocation();
  const isActive = comparePaths(pathname, href);

  return (
    <a href={href} aria-current={isActive ? "page" : undefined}>
      {children}
    </a>
  );
};

normalizePath

normalizePath gibt den kanonischen, Locale-unabhängigen Pfad zurück, der von comparePaths verwendet wird. Es entfernt das Locale-Segment, das Protokoll/den Host, den Query-String und den Hash, stellt einen einzelnen führenden Schrägstrich sicher, entfernt jegliche abschließenden Schrägstriche (außer für das Stammverzeichnis) und greift für leere Werte auf / zurück.

import { normalizePath } from "intlayer";

normalizePath("/ru/path"); // "/path"
normalizePath("/ru/path/"); // "/path"
normalizePath("ru/path"); // "/path"
normalizePath("/ru/"); // "/"
normalizePath("/ru"); // "/"
normalizePath(""); // "/"
normalizePath("https://example.com/ru/path"); // "/path"

Verwandte Funktionen

TypeScript

function normalizePath(inputUrl: string, locales?: Locales[]): string;

function comparePaths(
  pathname: string,
  href: string,
  locales?: Locales[]
): boolean;