CODEWITHSUNDEEP
typescriptnext.jsnext-link
Barry Horbal
Barry Horbal

Reputation: 445

How to fix Typescript error on Next JS next/link element

The following code is throwing me this Typescript error:

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 error is occurring on the href param 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;

Upvotes: 1

Views: 2444

Answers (1)

Blingus
Blingus

Reputation: 51

The problem is with the type generated by nextjs-routes in your nextjs-routes.d.ts file. If you look at their ReadMe (https://www.npmjs.com/package/nextjs-routes), you can see the format needed for href.

Here's how your first href should be passed. query is optional.

<li><Link href={{pathname: "/", query: {foo: "test"}}}>{majors[major as keyof typeof majors]}</Link></li>

If you change your paths, you'll have to regenerate the nextjs-routes.d.ts file with npx nextjs-routes. At the top of that file you can also see the Route type which details the acceptable pathname's that you can pass.

Upvotes: 2

Related Questions