I am currently working on introducing dynamic routing into an application that was originally designed with static routes. However, I am facing some confusion as I encounter TypeScript errors that are difficult for me to understand. Below is the code snippet where the error occurs, could someone provide guidance on how to resolve this issue?
View the issues I'm experiencing
import { NextPage } from 'next';
import { useRouter } from 'next/router';
// import CardWhitData from 'src/components/molecules/cardWhitData';
import FloatCard from 'src/components/atoms/floatCard';
const Event: NextPage = () => (
const router = useRouter()
const {index} = router.query
<>
<FloatCard
mainTitle="This is your event"
description="This is your description"
/>
</>
)
export default Event;
Upon running this code, I encounter the following error message:
Type '() => (: any, router: NextRouter | undefined, : any, { index }?: boolean) => any' is not assignable to type 'NextPage<{}, {}>'.
Type '() => (: any, router: NextRouter | undefined, : any, { index }?: boolean) => any' is not assignable to type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext<any>): {} | Promise<{}>; }'.
Type '() => (: any, router: NextRouter | undefined, : any, { index }?: boolean) => any' is not assignable to type 'FunctionComponent<{}>'.
Type '(: any, router: NextRouter | undefined, : any, { index }?: boolean) => any' is not assignable to type 'ReactElement<any, any>'.ts(2322)