Error: Invalid hook call in not-found.tsx
Unanswered
dperolio posted this in #help-forum
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>
);
}