I'm working on a gatsby based multilingual website. Each translation has its own root based on the language code. For example:
Blog
/en/blog
/pl/blog
/de/blog
Contact
/en/contact
/pl/kontakt
/de/kontakt
But with this design, there is no such thing as a natural "root" for the domain. There is at least tree different roots:
example.com/en
example.com/pl
example.com/de
I think it would be very undesirable to return 404 on example.com
. So I've decided to do something like that:
const Redirect = (props: any) => {
useEffect(() => {
const detected = detectLocale();
const newUrl = `/${detected}${props.path}`;
navigate(newUrl, { replace: true });
}, []);
return <></>;
};
And this redirect component is attached to /
However, with this approach, there is an empty page under example.com
, which exists only to redirect users.
Would it impact SEO? Is there any better approach?