#428

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { AnimatePresence, LayoutGroup, MotionConfig, motion } from 'framer-motion'
-import { Fragment, useEffect, useMemo, useState } from 'react'
+import { Fragment, useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { createBrowserRouter,
 	 Navigate,
 	 Route,
@@ -17,6 +18,7 @@ import { Toaster } from '@/components/ui/toaster'
 import { apiPost, isApiError } from '@/lib/api'
 import { fetchLocales, isLocaleCode, legacyLocalePath, switchLocalePath } from '@/lib/locales'
 import { localesKeys } from '@/lib/queryKeys'
+import { requiredPageLocale } from '@/lib/routeLocales'
 import { useLocale } from '@/lib/useLocale'
 import { applyClientAnimationMode,
 	 applyClientAppearance,
@@ -41,7 +43,7 @@ import MorePage from '@/pages/MorePage'
 import GekanatorPage from '@/pages/GekanatorPage'
 import NicoTagListPage from '@/pages/tags/NicoTagListPage'
 import NotFound from '@/pages/NotFound'
-import TOSPage from '@/pages/TOSPage.mdx'
+import TOSPage from '@/pages/TOSPage'
 import HelpDetailPage from '@/pages/help/HelpDetailPage'
 import HelpChangesPage from '@/pages/help/HelpChangesPage'
 import HelpDiffPage from '@/pages/help/HelpDiffPage'
@@ -268,6 +270,7 @@ const RoutedApp = ({ locales }: { locales: AvailableLocale[] }) => {
 const LocaleRoute: FC = () => {
   const { locale } = useParams ()
   const location = useLocation ()
+  const { i18n } = useTranslation ()
   const { data, isPending, isError, refetch } = useQuery ({
       queryKey: localesKeys.index,
       queryFn: fetchLocales,
@@ -275,6 +278,18 @@ const LocaleRoute: FC = () => {
       refetchOnMount: 'always',
       refetchOnWindowFocus: 'always',
       refetchOnReconnect: 'always' })
+  const pageLocale = requiredPageLocale (location.pathname)
+  const activeLocale =
+      (isLocaleCode (locale)
+       && data?.locales.some (entry => entry.code === locale)
+       && (pageLocale == null || pageLocale === locale))
+      ? locale
+      : null
+
+  useLayoutEffect (() => {
+    if (activeLocale != null && i18n.language !== activeLocale)
+      void i18n.changeLanguage (activeLocale)
+  }, [activeLocale, i18n])
 
   useEffect (() => {
     void refetch ()
@@ -287,6 +302,12 @@ const LocaleRoute: FC = () => {
     return <ServiceUnavailable/>
   if (isPending)
     return null
+  if (pageLocale != null && isLocaleCode (locale) && pageLocale !== locale)
+  {
+    return data.locales.some (entry => entry.code === pageLocale)
+	? <Navigate to={switchLocalePath (location, pageLocale)} replace/>
+	: <NotFound/>
+  }
   if (isLocaleCode (locale))
   {
     return data.locales.some (entry => entry.code === locale)