React项目中i18n多语言切换后刷新页面默认语言被浏览器本地化覆盖的修复咨询

Hey there, let's tackle that frustrating problem where your page switches back to Polish when you refresh after selecting German. I get why this is happening—since German is your default locale, it doesn't show up in the URL, so on refresh, your browser's Polish locale takes over. Here's how to fix it step by step:

1. Update the Language Switcher Component to Force German in the URL #

Your current component isn't adding the de locale to the URL when you select German. We need to adjust the click handler to ensure all languages, including German, get a locale identifier in the URL. Also, your original code has some syntax issues (unclosed tags, incorrect use of <link> with <a>) that we'll clean up.

Here's the revised component (assuming you're using Next.js, since you're using router.asPath):

import { useRouter } from 'next/router';

const LanguageSwitcher = () => {
  const router = useRouter();
  const { locale } = router;

  // Updated click handler to explicitly set the locale in the URL for all languages
  const handleLanguageChange = (targetLocale) => {
    router.push(
      { pathname: router.pathname, query: router.query },
      router.asPath,
      { locale: targetLocale }
    );
  };

  return (
    <div className="language">
      <span>
        <a onClick={() => handleLanguageChange('de')}>
          <img 
            width="30px" 
            className={locale === 'de' ? 'selected' : ''} 
            src="/images/flags/flaga-niemiec.png"
            alt="German"
          />
        </a>
      </span>
      <span>
        <a onClick={() => handleLanguageChange('pl')}>
          <img 
            width="30px" 
            className={locale === 'pl' ? 'selected' : ''} 
            src="/images/flags/flaga_polski.png"
            alt="Polish"
          />
        </a>
      </span>
      <span>
        <a onClick={() => handleLanguageChange('en')}>
          <img 
            width="30px" 
            className={locale === 'en' ? 'selected' : ''} 
            src="/images/flags/gb.png"
            alt="English"
          />
        </a>
      </span>
    </div>
  );
};

export default LanguageSwitcher;

Key changes here:

• We're explicitly passing the target locale to router.push for every language, so German will now appear as /de/... in the URL.
• Cleaned up invalid HTML structure (removed the misplaced <link> tags, since we're handling navigation via the click handler).
• Added descriptive alt text for accessibility.

2. Adjust Your i18n Initialization Logic to Prioritize URL Locale #

Next, we need to make sure your app prioritizes the locale from the URL over the browser's default setting. If you're using next-i18next, update your configuration file (e.g., next-i18next.config.js):

module.exports = {
  i18n: {
    defaultLocale: 'de',
    locales: ['pl', 'de', 'en'],
    // Disable automatic browser locale detection, or customize the logic
    localeDetection: false,
    // OR use custom detection to prioritize URL first, then default
    // localeDetection: (req, res, options) => {
    //   const urlLocale = req?.nextUrl?.locale;
    //   return urlLocale || options.defaultLocale;
    // },
  },
};

If you're using a different i18n library (like react-i18next), adjust your initialization code to:

• First check for a locale in the URL (e.g., parse the path or query parameter).
• If a URL locale exists, use it.
• If not, fall back to your default locale (de), not the browser's locale.

Why This Works #

By forcing German to appear in the URL when selected, your app will always see /de in the path on refresh. With the updated initialization logic, it will use that URL locale instead of falling back to the browser's Polish setting. This eliminates the automatic switch to Polish on refresh.

内容的提问来源于stack exchange，提问作者michau