feat: remove language prefix from URL (#1749)

Author: arielvino

src/layout/ThemeContext.tsx

@@ -20,11 +20,10 @@ import {
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useLocation, useNavigate } from 'react-router'
 import { prefixer } from 'stylis'
 import { useLocalStorage } from 'usehooks-ts'
 import dayjs from 'src/dayjs'
-import { getLang, getPathWithoutLang } from 'src/locale/allTranslations'
+import { getLang } from 'src/locale/allTranslations'
 
 // Direction-aware emotion caches: the RTL cache runs the vendor prefixer and then
 // flips physical CSS (left↔right); the LTR cache uses emotion's default (prefixer
@@ -62,21 +61,18 @@ export const ThemeProvider = ({ children }: PropsWithChildren) => {
   })
 
   const { i18n } = useTranslation()
-  const navigate = useNavigate()
 
   const toggleTheme = useCallback(() => setIsDarkTheme((prev) => !prev), [setIsDarkTheme])
 
   const emotionCache = RTL_LANGUAGES.includes(language) ? cacheRtl : cacheLtr
 
-  const location = useLocation()
-
+  // The URL no longer encodes the language, so switching is just a state update:
+  // the effect below syncs i18n, document direction/title and dayjs.
   const changeLanguage = useCallback(
     (newLanguage: string) => {
       setLanguage(newLanguage)
-      const pathWithoutLang = getPathWithoutLang(location.pathname)
-      navigate(`/${newLanguage}${pathWithoutLang}`)
     },
-    [setLanguage, navigate, location],
+    [setLanguage],
   )
 
   const contextValue = useMemo(

src/layout/header/shareUrl.test.ts

@@ -114,28 +114,6 @@ describe('buildShareUrl — /vehicle page', () => {
   })
 })
 
-// ---------------------------------------------------------------------------
-// buildShareUrl — language prefix stripping
-// ---------------------------------------------------------------------------
-
-describe('buildShareUrl — language prefix', () => {
-  it('strips the lang code from the output pathname', () => {
-    // A Hebrew user's link must not force Hebrew on the recipient.
-    // The recipient's localStorage/URL preference picks their own language.
-    expect(new URL(build('/he/gaps')).pathname).toBe('/gaps')
-    expect(new URL(build('/en/timeline')).pathname).toBe('/timeline')
-    expect(new URL(build('/ar/operator')).pathname).toBe('/operator')
-  })
-
-  it('/he/gaps and /gaps produce identical URLs', () => {
-    expect(build('/he/gaps')).toBe(build('/gaps'))
-  })
-
-  it('page without lang prefix is unaffected', () => {
-    expect(new URL(build('/gaps')).pathname).toBe('/gaps')
-  })
-})
-
 // ---------------------------------------------------------------------------
 // buildShareUrl — round-trip (encode → decode)
 // ---------------------------------------------------------------------------

src/layout/header/shareUrl.ts

@@ -1,4 +1,3 @@
-import { getPathWithoutLang } from 'src/locale/allTranslations'
 import { GlobalSearchState } from 'src/model/globalState'
 
 export type ShareableKey = keyof GlobalSearchState
@@ -31,7 +30,7 @@ export const buildShareUrl = (
   pageParams: Record<string, string>,
   origin = window.location.origin,
 ): string => {
-  const pagePath = getPathWithoutLang(pathname)
+  const pagePath = pathname
   const relevantKeys = PAGE_SHARE_PARAMS[pagePath] ?? []
 
   const params = new URLSearchParams()
@@ -44,7 +43,7 @@ export const buildShareUrl = (
   Object.entries(pageParams).forEach(([key, value]) => params.set(key, value))
 
   const query = params.toString()
-  // Use the lang-stripped path so shared links are language-agnostic.
-  // The recipient's language preference (localStorage) picks their own lang.
+  // The URL carries no language segment, so shared links are language-agnostic —
+  // the recipient's stored language preference (localStorage) picks their own lang.
   return `${origin}${pagePath}${query ? `?${query}` : ''}`
 }

src/layout/sidebar/SideBar.tsx

@@ -18,7 +18,7 @@ export default function SideBar() {
   const { t, i18n } = useTranslation()
   const { drawerOpen, setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
   const [collapsed, setCollapsed] = useState(false)
-  const { isDarkTheme, currentLanguage } = useTheme()
+  const { isDarkTheme } = useTheme()
 
   return (
     <>
@@ -47,7 +47,7 @@ export default function SideBar() {
         }}
         onCollapse={setCollapsed}
         className={cn('hideOnMobile', { dark: isDarkTheme })}>
-        <Link to={`/${currentLanguage}${PAGES[0].path}`} replace>
+        <Link to={PAGES[0].path} replace>
           {collapsed ? <CollapsedLogo /> : <Logo title={t('website_name')} dark={isDarkTheme} />}
         </Link>
         <div className="sidebar-divider" />

src/layout/sidebar/menu/Menu.tsx

@@ -5,8 +5,6 @@ import React, { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link, useLocation } from 'react-router'
 import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
-import { useTheme } from 'src/layout/ThemeContext'
-import { getPathWithoutLang } from 'src/locale/allTranslations'
 import DonateModal from 'src/pages/DonateModal/DonateModal'
 import { EVENT_DATE_ISO, REGISTRATION_CLOSE_ISO } from 'src/pages/hackathon/challenges'
 import { PAGES } from 'src/routes'
@@ -61,7 +59,6 @@ const HACKATHON_MENU_HIDE_MS = HACKATHON_EVENT_MS + 3 * 24 * 60 * 60 * 1000 // h
 
 const MainMenu = ({ collapsed = false }: MainMenuProps) => {
   const { t } = useTranslation()
-  const { currentLanguage } = useTheme()
   const { setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
   const [isDonateModalVisible, setDonateModalVisible] = useState(false)
 
@@ -75,7 +72,7 @@ const MainMenu = ({ collapsed = false }: MainMenuProps) => {
 
   const hackathonItem = showHackathon
     ? getItem(
-        <Link to={`/${currentLanguage}/hackathon`} onClick={() => setDrawerOpen(false)}>
+        <Link to="/hackathon" onClick={() => setDrawerOpen(false)}>
           {t('hackathon_title')}
           {hackathonDaysLeft !== null && (
             <span className="hackathon-badge">
@@ -105,7 +102,7 @@ const MainMenu = ({ collapsed = false }: MainMenuProps) => {
             itm.icon,
           )
         : getItem(
-            <Link to={`/${currentLanguage}${itm.path}`} onClick={() => setDrawerOpen(false)}>
+            <Link to={itm.path} onClick={() => setDrawerOpen(false)}>
               {t(itm.label)}
             </Link>,
             itm.path,
@@ -135,10 +132,10 @@ const MainMenu = ({ collapsed = false }: MainMenuProps) => {
   const items = collapsed ? flatItems : groupedItems
 
   const { pathname } = useLocation()
-  const [current, setCurrent] = useState(getPathWithoutLang(pathname) || '/')
+  const [current, setCurrent] = useState(pathname || '/')
 
   useEffect(() => {
-    const nextPath = getPathWithoutLang(pathname) || '/'
+    const nextPath = pathname || '/'
 
     if (current !== nextPath) {
       setCurrent(nextPath)

src/locale/allTranslations.ts

@@ -7,22 +7,10 @@ import translationsRU from './ru.json'
 
 export const SUPPORTED_LANGUAGES = ['en', 'ru', 'he', 'ar']
 
-// Get the path without the language prefix, if present
-export const getPathWithoutLang = (pathname: string): string => {
-  const parts = pathname.split('/').filter(Boolean)
-  if (!SUPPORTED_LANGUAGES.includes(parts[0])) return pathname
-  const rest = parts.slice(1).join('/')
-  return rest ? `/${rest}` : '/'
-}
-
-// Get saved language from URL or localStorage, default to 'he' if not found
+// Resolve the language from localStorage, then the browser locale, defaulting
+// to 'he'. The URL no longer carries a language prefix; legacy prefixed links
+// are handled by LegacyLangRedirect, which persists the language here.
 export const getLang = (): string => {
-  const parts = window.location.pathname.split('/').filter(Boolean)
-  const langPart = parts.find((part) => SUPPORTED_LANGUAGES.includes(part))
-  if (langPart) {
-    localStorage.setItem('language', langPart)
-    return langPart
-  }
   return (
     localStorage.getItem('language') ||
     SUPPORTED_LANGUAGES.find((l) => new Intl.Locale(navigator.language).language === l) ||

src/routes/LegacyLangRedirect.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from 'react'
+import { Navigate, useLocation, useParams } from 'react-router'
+import { useTheme } from 'src/layout/ThemeContext'
+import { SUPPORTED_LANGUAGES } from 'src/locale/allTranslations'
+
+// Backward-compatibility shim for links that still carry a language prefix
+// (/he, /en, /ru, /ar) — the URL scheme no longer includes one. It applies the
+// prefixed language, then redirects to the same path without the prefix
+// (preserving query string and hash). A first segment that isn't a known
+// language falls through to the homepage, matching the catch-all route.
+//
+// Isolated on purpose: delete this file and its `:lang/*` route in index.tsx
+// once old prefixed links have aged out.
+export const LegacyLangRedirect = () => {
+  const { lang, '*': rest } = useParams()
+  const { search, hash } = useLocation()
+  const { setLanguage } = useTheme()
+  const isKnownLang = lang !== undefined && SUPPORTED_LANGUAGES.includes(lang)
+
+  useEffect(() => {
+    if (isKnownLang && lang) setLanguage(lang)
+  }, [isKnownLang, lang, setLanguage])
+
+  return <Navigate to={isKnownLang ? { pathname: `/${rest ?? ''}`, search, hash } : '/'} replace />
+}

src/routes/index.tsx

@@ -28,6 +28,7 @@ import { DataResearch } from 'src/pages/DataResearch/DataResearch'
 import { ErrorPage } from 'src/pages/ErrorPage'
 import GapsPatternsPage from 'src/pages/gapsPatterns'
 import VelocityHeatmapPage from 'src/pages/velocityHeatmap'
+import { LegacyLangRedirect } from './LegacyLangRedirect'
 import { MainRoute } from './MainRoute'
 
 const HomePage = lazy(() => import('../pages/homepage/HomePage'))
@@ -165,35 +166,37 @@ const RedirectToHomepage = <Navigate to={routesList[0].path} replace />
 
 export const getRoutesList = () => {
   return (
-    <Route path="/:lang?">
-      <Route element={<MainRoute />}>
-        {routesList.map(({ path, element }) => (
-          <Route
-            key={path}
-            path={path === '/' ? undefined : path.replace(/^\//, '')}
-            index={path === '/'}
-            element={element}
-            ErrorBoundary={ErrorPage}
-          />
-        ))}
+    <Route element={<MainRoute />}>
+      {routesList.map(({ path, element }) => (
         <Route
-          path="profile/:gtfsRideGtfsRouteId"
-          element={<Profile />}
+          key={path}
+          path={path === '/' ? undefined : path.replace(/^\//, '')}
+          index={path === '/'}
+          element={element}
           ErrorBoundary={ErrorPage}
-          loader={async ({ params }) => {
-            try {
-              const route = await getRouteById(params?.gtfsRideGtfsRouteId)
-              return { route }
-            } catch (error) {
-              return {
-                route: null,
-                message: (error as Error).message,
-              }
-            }
-          }}
         />
-        <Route path="*" element={RedirectToHomepage} key="back" />
-      </Route>
+      ))}
+      <Route
+        path="profile/:gtfsRideGtfsRouteId"
+        element={<Profile />}
+        ErrorBoundary={ErrorPage}
+        loader={async ({ params }) => {
+          try {
+            const route = await getRouteById(params?.gtfsRideGtfsRouteId)
+            return { route }
+          } catch (error) {
+            return {
+              route: null,
+              message: (error as Error).message,
+            }
+          }
+        }}
+      />
+      {/* Backward-compat: old links carried a language prefix (/he, /en, /ru, /ar).
+          Strip it, apply the language, and redirect to the clean path.
+          Remove this route (and LegacyLangRedirect) once such links have aged out. */}
+      <Route path=":lang/*" element={<LegacyLangRedirect />} />
+      <Route path="*" element={RedirectToHomepage} key="back" />
     </Route>
   )
 }
@@ -204,7 +207,8 @@ window.addEventListener('vite:preloadError', () => {
 
 const routes = createRoutesFromElements(getRoutesList())
 
-// If the URL doesn't have a language prefix, we will use the saved language or default to Hebrew
+// The URL carries no language segment; the language is resolved from
+// localStorage / the browser locale (see getLang in allTranslations.ts).
 const router = createBrowserRouter(routes, {
   basename: import.meta.env.VITE_BASE_PATH || '/',
 })