Translations for 404 errors

[cjoecker]

When the user enters a wrong URL, Remix throws the ErrorBoundary component from root.tsx without running the root's loader. I can use a splat route as described here to run the loader but the i18next context will still be missing. Therefore, the ErrorBoundary component cannot show translations for 404 errors.
What is the recommended approach to show a translated 404 errors in Remix?

[sergiodxa]

If you use a splat route it should still load i18next since that's configured in entry.client and entry.server, and root is working.

The splat route is the best way to do it, I recommend considering the root error boundary for 500 errors, errors where everything crashed and is down and in that case you don't even know how to correctly translate the errors (e.g. if root loader failed you don't know the user locale)

[cjoecker]

I made it work now, thanks! Without a default namespace, it was not working.

Would it make sense to add something like this to the docs since it is not obvious:

To render the 404 page with translations, a splat route in routes/$.tsx like this is necessary

// splat route necessary to render 404 page with i18next
export function loader() {
	throw new Response('Not found', { status: 404 })
}

export default function NotFound() {
	return null
}