When working on my code, I encountered a Typescript error that's bothering me:
Type 'string' is not assignable to type 'RouteOrQuery'.ts(2322) nextjs-routes.d.ts(32, 5): The expected type comes from property 'href' which is declared here on type 'IntrinsicAttributes & LinkProps & { children?: ReactNode; }'
The issue is specifically related to the href parameter of the <Link> element.
import * as React from 'react';
import Link from 'next/link';
import styles from './breadcrumbs.module.css';
interface iMajors {
theatre: string;
musicaltheatre: string;
opera: string;
dance: string;
music: string;
visualarta: string;
}
type Props = {
schoolName: string;
major: string;
slug: string;
};
const Breadcrumbs: React.FC<Props> = (props) => {
const {
schoolName,
major,
slug
} = props;
const majors: iMajors = {
theatre: `Theatre`,
musicaltheatre: `Musical Theatre`,
opera: `Opera`,
dance: `Dance`,
music: `Music`,
visualarts: `Visual Arts`
};
if (schoolName && major && slug) {
return (
<div className={styles.container}>
<nav>
<ul>
<li><Link href="/">Home</Link></li>
<li><Link href={`/${major}`}>{majors[major as keyof typeof majors]}</Link></li>
<li><Link href={`/${major}/${slug}`}>{schoolName}</Link></li>
</ul>
</nav>
</div>
);
}
return null;
};
export default Breadcrumbs;