我使用NextJS 9.1.3,并使用以下代码在我的项目中生成导航:
import { useRouter } from 'next/router';
import { Menu, Icon } from 'antd';
import PropTypes from 'prop-types';
import Link from 'next/link';
const Navigation = () => {
const navPoints = [
{
id: 0,
key: '/index',
icon: 'info',
title: 'Testpage',
path: '/',
},
{
id: 1,
key: '/helloworld',
icon: 'info',
title: 'Hello World',
path: '/helloworld',
},
];
const propTypes = {
onClick: PropTypes.function,
href: PropTypes.string,
icon: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
};
const defaultProps = {
onClick: Function.prototype,
href: '',
};
const CustomNavPoint = React.forwardRef(
({
onClick, href, icon, title,
}, ref) => (
<a href={href} onClick={onClick} ref={ref}>
<Icon type={icon} />
{title}
</a>
),
);
CustomNavPoint.propTypes = propTypes;
CustomNavPoint.defaultProps = defaultProps;
CustomNavPoint.displayName = 'CustomNavPoint';
const router = useRouter();
const currentRoute = router.pathname;
return (
<Menu
selectedKeys={[currentRoute === '/' ? '/index' : currentRoute]}
mode="horizontal"
overflowedIndicator={<Icon type="bars" />}
>
{navPoints && navPoints.length
? navPoints.map((el) => (
<Menu.Item key={el.key} title={el.title}>
<Link href={el.path} passHref>
<CustomNavPoint icon={el.icon} href={el.path} title={el.title} />
</Link>
</Menu.Item>
))
: null}
</Menu>
);
};
export default Navigation;
在开发模式下,它可以完美运行,但是如果我这样做:
yarn build
yarn export (next export)
然后链接在生产版本中将不起作用。
我已经阅读到passHref和click函数一样重要,但是导航点不起作用。
尽管anker标签获得了正确的路径:
这是什么问题,有人可以在这里帮忙吗?