如何阻止 Link 组件在 NextJS 中给出 404 错误？

Question

谁能告诉我为什么下面的Link组件找不到链接页面？ VSCode 实际上是在我输入文件名时自动完成，但由于某种原因，我一直收到 404。

//index.js in WelcomePage folder
import styles from "/styles/WelcomePage.module.css";
import Link from "next/link";

function WelcomePage() {
  return (
    <>
      <h1 className={styles.title}>This is the Title</h1>
      <Link href="/pages/ClassSearch">Class Search</Link>
    </>
  );
}

export default WelcomePage;

//index.js in ClassSearch folder
function ClassSearch() {
  return <h1>The Class Search Page</h1>;
}

export default ClassSearch;

Answer 1

我认为你需要 link /ClassSearch 而不是 pages/ClassSearch

如果您创建 pages/ClassSearch/index.js 导出 React 组件，
它将可以在 /ClassSearch

访问

// <Link href="/pages/ClassSearch">Class Search</Link>
<Link href="/ClassSearch">Class Search</Link>

您可以查看下一页文档

https://nextjs.org/docs/basic-features/pages

如何阻止 Link 组件在 NextJS 中给出 404 错误？

How To Stop Link Component From Giving 404 Error in NextJS?

reactjs

next.js