Hey there! Let's walk through setting up bilingual (Chinese/English) support for your Meteor + React site, following your initial ideas. I'll break this down step by step to make it actionable.

First, organize your language files to keep things clean. Create an imports/i18n folder for core config, and a public/i18n folder to store your translation assets (since Meteor serves files from public directly):

your-project/
├── imports/
│   └── i18n/
│       └── init.js       # i18n initialization logic
├── public/
│   └── i18n/
│       ├── en/
│       │   ├── common.json   # Shared translations (navbar, buttons)
│       │   └── home.json     # Home page-specific translations
│       └── cn/
│           ├── common.json
│           └── home.json
└── ...

To implement URLs like example.com/cn/home or example.com/en/about, use React Router to define routes with a language parameter. Here's how to set it up:

// imports/ui/AppRouter.jsx
import { Routes, Route, Navigate } from 'react-router-dom';
import Layout from './Layout';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

function AppRouter() {
  return (
    <Routes>
      // Match routes with valid language prefixes
      <Route path="/:lang(en|cn)" element={<Layout />}>
        <Route index element={<HomePage />} />
        <Route path="about" element={<AboutPage />} />
        // Add other page routes here
      </Route>
      // Redirect all non-prefixed URLs to default language (English)
      <Route path="*" element={<Navigate to="/en" replace />} />
    </Routes>
  );
}

export default AppRouter;

In your Layout component, extract the language parameter from the URL and pass it down to child components (via React Context or directly):

// imports/ui/Layout.jsx
import { useParams, Outlet } from 'react-router-dom';
import { createContext, useContext } from 'react';
import LanguageSwitcher from './components/LanguageSwitcher';

const LanguageContext = createContext();

export function useLanguage() {
  return useContext(LanguageContext);
}

function Layout() {
  const { lang } = useParams();

  return (
    <LanguageContext.Provider value={lang}>
      <nav>
        <LanguageSwitcher />
        {/* Your navbar links here */}
      </nav>
      <Outlet />
    </LanguageContext.Provider>
  );
}

export default Layout;

Build a simple switcher that updates the URL while keeping the user on the same page:

// imports/ui/components/LanguageSwitcher.jsx
import { useNavigate, useParams } from 'react-router-dom';

function LanguageSwitcher() {
  const navigate = useNavigate();
  const { lang } = useParams();

  const switchLang = (newLang) => {
    // Replace the language prefix in the current URL
    const updatedPath = window.location.pathname.replace(/^\/(en|cn)/, `/${newLang}`);
    navigate(updatedPath);
  };

  return (
    <div className="lang-switcher">
      <button 
        onClick={() => switchLang('en')}
        disabled={lang === 'en'}
        className={lang === 'en' ? 'active' : ''}
      >
        English
      </button>
      <button 
        onClick={() => switchLang('cn')}
        disabled={lang === 'cn'}
        className={lang === 'cn' ? 'active' : ''}
      >
        中文
      </button>
    </div>
  );
}

export default LanguageSwitcher;

We'll use react-i18next (a popular i18n library) to handle text translations. First install dependencies:

meteor npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

Initialize i18n in your imports/i18n/init.js:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend) // Load translation files from public/i18n
  .use(LanguageDetector) // Auto-detect language (prioritize URL parameter)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: false,
    interpolation: {
      escapeValue: false, // React handles XSS protection automatically
    },
    detection: {
      order: ['path', 'cookie', 'localStorage', 'navigator'],
      lookupPath: 'lng',
    },
    backend: {
      loadPath: '/i18n/{{lng}}/{{ns}}.json',
    }
  });

export default i18n;

Import this init file in your main app entry point (e.g., client/main.jsx) to load it on startup:

import '/imports/i18n/init';

Now use translations in your components:

// imports/ui/pages/HomePage.jsx
import { useTranslation } from 'react-i18next';

function HomePage() {
  const { t } = useTranslation('common'); // 'common' matches the namespace in your JSON files

  return (
    <div className="home-page">
      <h1>{t('welcome.message')}</h1>
      <p>{t('intro.text')}</p>
    </div>
  );
}

Example translation file (public/i18n/en/common.json):

{
  "welcome": {
    "message": "Welcome to our website!"
  },
  "intro": {
    "text": "We're building something awesome with Meteor and React."
  }
}

For dynamic content (like blog posts or products), you have two solid options:

Option 1: Single Document with Multilingual Fields #

Store all language versions in one document (great for short content):

// Example Posts collection document
{
  _id: "abc123",
  title: {
    en: "Getting Started with Meteor i18n",
    cn: "Meteor国际化入门指南"
  },
  content: {
    en: "...",
    cn: "..."
  },
  createdAt: new Date()
}

Fetch and display the correct language version using the current lang:

// imports/ui/pages/PostDetail.jsx
import { useTracker } from 'meteor/react-meteor-data';
import { Posts } from '/imports/api/posts';
import { useLanguage } from '../Layout';

function PostDetail({ postId }) {
  const currentLang = useLanguage();

  const post = useTracker(() => {
    return Posts.findOne(postId);
  }, [postId]);

  if (!post) return <div>Loading...</div>;

  return (
    <div>
      <h2>{post.title[currentLang]}</h2>
      <div>{post.content[currentLang]}</div>
    </div>
  );
}

Option 2: Separate Documents per Language #

Store each language version as a separate document (better for long, independently managed content):

// Example Posts collection documents
{
  _id: "en-abc123",
  postSlug: "getting-started-i18n",
  lang: "en",
  title: "Getting Started with Meteor i18n",
  content: "...",
  createdAt: new Date()
},
{
  _id: "cn-abc123",
  postSlug: "getting-started-i18n",
  lang: "cn",
  title: "Meteor国际化入门指南",
  content: "...",
  createdAt: new Date()
}

Fetch by slug and language:

const post = useTracker(() => {
  return Posts.findOne({ postSlug: "getting-started-i18n", lang: currentLang });
}, [currentLang]);

• Add the lang attribute to your root <html> tag to improve SEO: <html lang={currentLang}>
• Cache language preferences using cookies/localStorage so users don't have to switch every time they visit
• Validate language parameters in your routes to avoid 404s for invalid prefixes

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