Next.js-链接在生产中不起作用

时间:2019-11-11 21:10:05

标签: javascript routing next.js

我使用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标签获得了正确的路径:

HTML of the navpoint

这是什么问题,有人可以在这里帮忙吗?

0 个答案:

没有答案