Next.js 嵌套路由

Question

我有一個具有以下文件結構的項目。 如何從“組件文件”中的“導航組件”路由到頁面文件中的 about.js 文件？

/root
  \_ /.next/
  \_ /components/
      \_ nav/
          \_ nav.jsx
          \_ nav.module.css
      \_ products/
          \_ products.jsx
          \_ products.module.css
  \_ /pages/
      \_ _app.jsx
      \_ _document.jsx
      \_ about.jsx
      \_ index.jsx
  \_ /public/
      \_ favicon.ico
      \_ header.png
  \
  \_ .eslintignore
  \_ .eslintrc
  \_ .env
  \_ babel.config.js
  \_ Dockerfile
  \_ jest.config.js
  \_ next.config.js
  \_ package.json
  \_ README.md

這是我的導航組件：

    import React from "react";
    import Link from "next/link";
    const Nav = () => {
  return (
          <div>

                 Link href="/pages/about.js">
                  <a className={Style.navBottomLinks}>ABOUT</a>
                </Link>
          </div>
  );
};

export default Nav;

Answer 1

使用 Nextjs路由器

 import Link from "next/link"; import { useRouter } from 'next/router' const Nav = () => { const router = useRouter() return ( <div> <Link onclick={()=> router.push("/about")}> <a className={Style.navBottomLinks}>ABOUT</a> </Link> </div> ); }; export default Nav;