Author:
    Creation:2026-09-19Last update:2026-09-19

    useLocale рд╣реБрдХ рдкреНрд░рд▓реЗрдЦрди

    remix-intlayer рдХрд╛ useLocale рд╣реБрдХ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рд╕рдВрд╕рд╛рдзрд┐рдд рдХрд┐рдП рдЬрд╛ рд░рд╣реЗ HTTP рдЕрдиреБрд░реЛрдз рдХреЗ рд▓реЛрдХреЗрд▓ рдХреЗ рд╕рд╛рде-рд╕рд╛рде рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдХреЗ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░ рдХрд┐рдП рдЧрдП рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдФрд░ рдЙрдкрд▓рдмреНрдз рд▓реЛрдХреЗрд▓реНрд╕ рддрдХ рдкрд╣реБрдВрдЪ рдкреНрд░рджрд╛рди рдХрд░рддрд╛ рд╣реИред

    рдЙрдкрдпреЛрдЧ

    рдПрдХ Remix рдШрдЯрдХ рдореЗрдВ (рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП рднрд╛рд╖рд╛ рдЪрдпрдирдХрд░реНрддрд╛):

    src/components/LocaleSwitcher.tsx
    import { type FC } from "react";
    import { Link } from "@remix-run/react";
    import { useLocale } from "remix-intlayer";
    import { getLocalizedUrl, getPathWithoutLocale } from "intlayer";
    
    export const LocaleSwitcher: FC = () => {
      const { locale, availableLocales } = useLocale();
      const pathWithoutLocale = getPathWithoutLocale();
    
      return (
        <nav>
          <ul>
            {availableLocales.map((localeItem) => (
              <li key={localeItem} className="p-1">
                <Link
                  href={getLocalizedUrl(pathWithoutLocale, localeItem)}
                  aria-current={localeItem === locale ? "page" : undefined}
                >
                  {localeItem.toUpperCase()}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      );
    };
    

    рд░реВрдЯ рд╣реИрдВрдбрд▓рд░ рдореЗрдВ:

    src/server.ts
    import { createRouter } from "remix/router";
    import { intlayer, useLocale } from "remix-intlayer";
    
    const router = createRouter({
      middleware: [intlayer()],
    });
    
    router.get("/api/locale-info", () => {
      const { locale, defaultLocale, availableLocales } = useLocale();
    
      return Response.json({
        locale,
        defaultLocale,
        availableLocales,
      });
    });
    

    рд░рд┐рдЯрд░реНрди рдорд╛рди

    рд╣реБрдХ UseLocaleResult рдкреНрд░рдХрд╛рд░ рдХрд╛ рдПрдХ рдСрдмреНрдЬреЗрдХреНрдЯ рд▓реМрдЯрд╛рддрд╛ рд╣реИ:

    рдЧреБрдгрдкреНрд░рдХрд╛рд░рд╡рд┐рд╡рд░рдг
    localeDeclaredLocalesрд╡рд░реНрддрдорд╛рди рдЕрдиреБрд░реЛрдз рдХреЗ рд▓рд┐рдП рд╣рд▓ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд▓реЛрдХреЗрд▓ред
    defaultLocaleDeclaredLocalesintlayer.config.ts рдореЗрдВ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдлрд╝реЙрд▓рдмреИрдХ рд▓реЛрдХреЗрд▓ред
    availableLocalesDeclaredLocales[]intlayer.config.ts рдореЗрдВ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░ рдХрд┐рдП рдЧрдП рд╕рднреА рдЙрдкрд▓рдмреНрдз рд▓реЛрдХреЗрд▓реНрд╕ рдХреА рд╕реВрдЪреАред

    рд╡рд┐рд╡рд░рдг

    1. рдЕрдиреБрд░реЛрдз-рджрд╛рдпрд░рд╛ рд╕рдорд╛рдзрд╛рди: intlayer() рдорд┐рдбрд▓рд╡реЗрдпрд░ рджреНрд╡рд╛рд░рд╛ рдкреНрд░рдмрдВрдзрд┐рдд рд╕рдХреНрд░рд┐рдп рдЕрдиреБрд░реЛрдз рдореЗрдВ, useLocale рдЕрдиреБрд░реЛрдз рд╕рдВрдЧреНрд░рд╣рдг рд╕реЗ рд╣рд▓ рдХрд┐рдП рдЧрдП рд▓реЛрдХреЗрд▓ рдХреЛ рдкрдврд╝рддрд╛ рд╣реИред
    2. рд╕рд╣рдЬ рдлрд╝реЙрд▓рдмреИрдХ: рдпрджрд┐ рдЕрдиреБрд░реЛрдз рд╕рдВрджрд░реНрдн рдХреЗ рдмрд╛рд╣рд░ рдХреЙрд▓ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ (рдЬреИрд╕реЗ рдХрд┐ рдЖрд░рдВрднреАрдХрд░рдг рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдпрд╛ рдкрд░реАрдХреНрд╖рдг рд╕реБрдЗрдЯ рдХреЗ рджреМрд░рд╛рди), рддреЛ рдпрд╣ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░ рдХрд┐рдП рдЧрдП defaultLocale рдкрд░ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд╣реЛ рдЬрд╛рддрд╛ рд╣реИред

    рд╕рдВрдмрдВрдзрд┐рдд рджрд╕реНрддрд╛рд╡реЗрдЬрд╝