下一个js导航404未找到

Question

我刚刚创建了一个新的 next js 项目，目前正在实现客户端导航。问题是我无法导航到“/”之外的其他路线。

Layout.js：

import "../styles/globals.css";

export const metadata = {
  title: "Julien Claerhout",
  description: "Julien Claerhout portfolio",
  favicon: "../public/favicon.ico",
};

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>{children}</body>
    </html>
  );
}

page.js：

import Home from './home';

export default function Page() {
  return <Home />;
}

home.js：

import Image from "next/image";
import Nav from './nav';

function Home() {
  return (
    <div className="flex flex-col bg-white overflow-auto">
      <div className="h-screen flex flex-col">
        <div className="h-1/5 flex items-center justify-center">
          <Nav />
        </div>
        <div className="h-4/5 flex flex-row">
          <div className="w-2/3 flex items-center justify-center">
            <Image className="rounded-full" src="/images/me.jpg" alt="Julien Claerhout" width={400} height={400} />
          </div>
          <div className="w-2/3 flex items-center">
            <div className="text-center">
              <h1 className="text-8xl font-zen-bold text-darkgreen">Julien Claerhout</h1>
              <p className="text-4xl font-zen-black text-darkgreen">IT student</p>
            </div>
          </div>
        </div>
      </div>
      <div className="px-8 py-4">
        <h2 className="text-4xl font-zen-bold text-darkgreen mb-4">About Me</h2>
        <p className="text-lg text-darkgreen">
          // Ajoutez ici le texte de votre choix
        </p>
      </div>
    </div>
  );
}

export default Home;

nav.js：

import Link from "next/link";

function Nav() {
    return (
        <nav>
            <Button href="/">Acceuil</Button>
            <Button href="/portfolio">Portfolio</Button>
            <Button href="/cv">CV</Button>
        </nav>
    );
}

function Button({ href, children }) {
    return (
      <Link href={href}>
        <button className="m-2 w-24 h-12 rounded-3xl text-lg font-zen-bold bg-lightgreen transform transition-transform duration-500 hover:scale-110">
          {children}
        </button>
      </Link>
    );
}

export default Nav;

当我点击导航按钮时，对于“portfolio”和“cv”路线，我找不到 404 页面。

这是我的文件结构： file structure

我已阅读下一个 js 应用程序路由器文档，但无法解决我的问题...

Answer 1

页面路由器让您可以使用简单的

/pages/portfolio.js

和

/pages/cv.js

。使用 app 路由器，您需要不同的结构：

app/
  portfolio/
    page.js
  cv/
    page.js

请参阅定义路线。

下一个js导航404未找到

问题描述投票：0回答：1

1个回答

最新问题

下一个js导航404未找到

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1