Next.js Discord

Discord Forum

Error: Invalid hook call in not-found.tsx

Unanswered
dperolio posted this in #help-forum
Open in Discord
Avatar
dperolioOP
How is this an invalid hook call? My not-found.tsx looks like this:
'use client'
 
import { getDictionary, getRoutes, createI18nDictionary, Dictionary } from '#i18n';
import { Body, Heading, Button } from '#components';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';

import type { Locale, Routes } from '#types';

export default function NotFound () {
  const [ Messages, setMessages ] = useState<Dictionary>({});
  const [ Routes, setRoutes ] = useState<Routes>({});

  useEffect(() => {
    const path = usePathname();
    const locale = path.replace('/', '');
    console.log('path', path);
    console.log('locale', locale);

    getDictionary(locale as Locale).then(dictionary => {
      const i18nMessages = createI18nDictionary(dictionary);
      setMessages(i18nMessages);
    });
    
    const routes = getRoutes(locale);
    setRoutes(routes);
  }, []);

  return (
    <Body showBackground>
      <Heading level={1}>
        {Messages.PAGE_NOT_FOUND}
      </Heading>
      <p>
        {Messages.PAGE_DOESNT_EXIST}
      </p>
      <Button
        href={Routes.HOME}
        style={{
          display: 'flex',
          marginTop: '2rem'
        }}
      >
        {Messages.GO_HOME}
      </Button>
    </Body>
  );
}

0 Replies