如何阻止链接组件在NextJS给出404错误?

Question

谁能告诉我为什么下面的链接组件无法找到链接的页面?当我输入文件名时，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

我认为你需要链接/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