Good point @mutou981 , thanks for asking

I updated the template to demo it https://github.com/aymericzip/intlayer-tanstack-start-template/blob/main/src/routes/%7B-%24locale%7D/route.tsx

Note: the behavior of tanstack router regarding not found pages is still a bit weird from by point of vue, there is multiple issue open on that topic

Code :

import {
  createFileRoute,
  HeadContent,
  Outlet,
  redirect,
  Scripts,
} from '@tanstack/react-router';
import { configuration } from 'intlayer';
import Header from '@/components/Header';
import { NotFoundComponent } from './404';

const queryClient = new QueryClient();

const { locales, defaultLocale } = configuration.internationalization;

export const Route = createFileRoute('/{-$locale}')({
  beforeLoad: async ({ params }) => {
    // Get locale from route params (not from server headers, as beforeLoad runs on both client and server)
    const locale = params.locale;

    // If no locale provided (optional param), it's valid (will use default)
    // In prefix-all mode, the locale is required to be a valid locale
    const { localePrefix } = getPrefix(localeParam ?? defaultLocale, { mode });
    if (localePrefix === localeParam && localeParam === undefined) return;

    // Check if the provided locale is valid
    const isValidLocale = locales.some((localeEl) => localeEl === locale);

    if (!isValidLocale) {
      throw redirect({
        to: '/{-$locale}/404',
        params: { locale: undefined }, // Locale param is undefined in routing.mode = 'prefix-no-default', but can be changed by defaultLocale in routing.mode = 'prefix-all'
      });
    }
  },
  component: RouteComponent,
  notFoundComponent: NotFoundComponent,
});

function RouteComponent() {
  const { locale } = Route.useParams();

  useI18nHTMLAttributes();

  return (
    <html lang={locale ?? defaultLocale}>
      <head>
        <HeadContent />
      </head>
      <body>
        <Header />
         <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

import { createFileRoute, HeadContent, Scripts } from '@tanstack/react-router';
import { useIntlayer, useLocale } from 'react-intlayer';

import { LocalizedLink } from '@/components/localized-link';

export const Route = createFileRoute('/{-$locale}/404')({
  component: NotFoundComponent,
});

export function NotFoundComponent() {
  const { locale } = Route.useParams();
  const { defaultLocale } = useLocale();
  const { title, subtitle, backHome, lostMessage } = useIntlayer('not-found');

  return (
    <html lang={locale ?? defaultLocale}>
      <head>
        <HeadContent />
      </head>
      <body>
        <div>
          404
        </div>
        <Scripts />
      </body>
    </html>
  );
}

Uh oh!

How do I customize an exception page like a 404? #343

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions