Issue
I have a menu Item that gets its href and label from a different component called NavBar. It works with yarn dev but fails to build. Changing to fixes the problem. Passing the href directly fixes the issue too.
This is the Menu Item This Version works, the commented part will not compile
import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
type MenuItemProps = {
label: string;
href: string;
};
const MenuItem: React.FC<MenuItemProps> = ({ label, href }) => {
const router = useRouter();
const isActive = router.pathname === href;
return (
<div className={`${"menuItem"} ${isActive ? "menuItem active" : ''}`}>
{/* <Link href={href}>{label}</Link> */}
<Link href='/datenschutz'>{label}</Link>
</div>
);
};
export default MenuItem;
This is the NavBar
import React from 'react';
import MenuItem from './MenuItem';
const NavBar = () => {
return (
<div className="navbar">
<MenuItem href='/leistungen' label='Leistungen'></MenuItem>
<MenuItem href='/kontakt' label='Kontakt'></MenuItem>
<MenuItem href='/aktuelles' label='Aktuelles'></MenuItem>
<MenuItem href='/datenschutz' label='Datenschutz'></MenuItem>
<MenuItem href='/impressum' label='Impressum'></MenuItem>
</div>
);
};
export default NavBar;
I would appreciate it if someone could point me in the right direction.
Changing <Link>
to a
fixes the problem. Passing the href directly fixes the issue too (But this is obviously not practical). I want the functionality of the Link Component for fast navigation on my page. But now I think I can exclude problems with the router.
Solution
Make sure Nav & MenuItem
components are both outside of pages
directory
Adding non-pages e.g. components to your pages folder can make the build process of passing props fail while works fine in development
reference: NEXT docs
Answered By - Sakar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.