How to use URL path for language detection? #135
-
As far as I can see, there is no support for using the locale in the url (e.g. I would like my app to respect the locale in the URL if the user enters the website trough an URL that has the locale in it. However in I'm using the basic setup as described in the readme of this repo. Is there any way to solve this? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 3 replies
-
You can access that from the In the root loader: export async function loader({ request, params }: DataFunctionArgs) {
// use params.locale, if it's undefined (optional segments) fallback to i18next.getLocale
let locale = params.locale ?? await i18next.getLocale(request);
return json({ locale })
} Or if you don't want to use export default function Component() {
let locale = useParams().locale ?? "en" // fallback in case of optional segments
// more code
} |
Beta Was this translation helpful? Give feedback.
-
Hi @sergiodxa, Thanks for your reply! That makes a lot of sense to use the remix hook to do that. However, it is now still getting the wrong locale in const instance = createInstance()
const lng = await i18next.getLocale(request)
const ns = i18next.getRouteNamespaces(remixContext)
console.log({ lng }) // `locale: 'en' which is default locale, however we requested /nl/ This doesn't break anything as the root loader will set the correct locale based on the path, however it seems a little wasteful to initiate the I18nProvider with the wrong locale first. Also, this doesn't seem to work when navigating from Do you have any suggestions to solve these issues? |
Beta Was this translation helpful? Give feedback.
-
Another issue I see (probably a remix issue not a remix-i18next issue though), is that when I request the dutch url request to in root.ts loader: request to in root.ts loader: The route for the dutch variant is defined trough routes(defineRoutes) {
return defineRoutes((route) => {
route(
'nl/rtp-nl',
'routes/$locale.rtp-nl.tsx',
{ id: 'rtp-nl-root' },
() => {
route('', 'routes/$locale.rtp-nl._index.tsx', {
id: 'index-nl',
index: true,
})
route(
'afspraak-maken',
'routes/$locale.rtp-nl.make-appointment.tsx',
{ id: 'appointment-nl' },
)
},
)
}) |
Beta Was this translation helpful? Give feedback.
You can access that from the
params
you get in your loaders and actions, or usinguseParams
hook in the UI.In the root loader:
Or if you don't want to use
i18next.getLocale
you can access it direct in the root component.