-
|
Anyone has successfully implemented I would like to use the route params |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
// @refresh reload
import { I18nContext, createI18nContext } from "@solid-primitives/i18n";
import dayjs from "dayjs";
import "dayjs/locale/he";
import { Suspense, createEffect } from "solid-js";
import {
Body,
ErrorBoundary,
FileRoutes,
Head,
Html,
Meta,
Routes,
Scripts,
Title,
} from "solid-start";
import he from "~/i18n/locales/he.json";
import "./root.css";
export default function Root() {
const lang = "he";
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
const i18nDictionary = { he };
const i18n = createI18nContext(i18nDictionary, lang);
const [t] = i18n;
createEffect(() => {
dayjs.locale(lang);
});
return (
<Html lang={lang} dir="rtl">
<I18nContext.Provider value={i18n}>
<Head>
<Title>{t("title")}</Title>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Body>
<Suspense>
<ErrorBoundary>
<Routes>
<FileRoutes />
</Routes>
</ErrorBoundary>
</Suspense>
<Scripts />
</Body>
</I18nContext.Provider>
</Html>
);
} |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for sharing @nirtamir2. In the end I did manage to make it work quite nicely :) I'm using the // @refresh reload
import { useLocation } from "@solidjs/router";
import { Suspense } from "solid-js";
import {
Body,
ErrorBoundary,
FileRoutes,
Head,
Html,
Meta,
Routes,
Scripts,
Title,
} from "solid-start";
import { I18nProvider } from "~/i18n";
import { dict } from "~/i18n-dict";
import "./root.css";
function extractLocale(path: string, defaultLocale = "en") {
const segments = path.split("/");
let locale = segments[1];
if (locale && locale.length === 2) {
return locale;
} else {
return defaultLocale;
}
}
export default function Root() {
const location = useLocation();
const locale = extractLocale(location.pathname);
return (
<Html lang={locale} class="h-full">
<Head>
<Title>Not relevant as it will be set in page component accordingly to the content</Title>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta name="description" content="some description" />
</Head>
<Body class="h-full">
<Suspense>
<ErrorBoundary>
<I18nProvider dict={dict} locale={locale}>
<Routes>
<FileRoutes />
</Routes>
</I18nProvider>
</ErrorBoundary>
</Suspense>
<Scripts />
</Body>
</Html>
);
} |
Beta Was this translation helpful? Give feedback.
Thanks for sharing @nirtamir2.
In the end I did manage to make it work quite nicely :) I'm using the
langparam in the route. Unfortunately, asuseParams()does not work in root (not surrounded by<Route>), I had to extract the local fromlocation.pathname.