CustomMenu React-Hooks和Nextjs

Question

我正在制作一个带有反应钩子的个性化多链接菜单，接下来，该组件的目标是当选择一个选项时，必须用箭头标记，并且内容必须显示在该行下方，但是我离开所有人。它显示为一个自定义链接，当URL与所指向的URL相同时，它表示特殊的内容。我在这里留下代码：

组件MenuLink：

 import React from "react";
import {useRouter} from 'next/router';
import Link from 'next/link'

function CustomLinkExample() {
  return (
      <div>
        <MenuLink activeOnly={true} to="/" label="Home"/>
        <MenuLink to="/about" label="About" />
        <hr/>
        <Link pathname="/"><Home /></Link>
        <Link pathname="/about"><About /></Link>
      </div> 
  );
}

export default CustomLinkExample;
function MenuLink({ label, to, activeOnly }) {
  let match = useRouter({
    pathname: to,
    exact: activeOnly
  });
  return (
    <div className='boxMenu'>
      {match && "=> "}
      <Link to={to}>{label}</Link>
      <style jsx>
          {`
          div{
              color:red;
          }
          `}
      </style>
    </div>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
      <h3>12345679890</h3>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
      <h3>987654310</h3>
    </div>
  );
}

示例：

enter image description here