Next.js中点击按钮无法跳转至NewStudent页面问题咨询

问题根源 #

你当前代码存在两个核心问题：

1. 在StudentsPage.tsx中直接引入并渲染了<NewStudent />组件，这会导致该组件始终固定显示在当前页面内，和按钮跳转逻辑完全无关
2. 若路由文件结构与href路径不匹配，也会导致跳转失效

修复步骤 #

1. 移除当前页面内的NewStudent组件渲染

修改StudentsPage.tsx，删除不必要的组件引入和渲染代码：

import React from 'react';
import Link from 'next/link';

const StudentsPage = () => {
  return (
    <div className="bg-white p-8 overflow-auto mt-16 h-screen">
      <h1>Students Page</h1>
      <Link href="/Admin/Students/NewStudent">
        <button className="bg-blue-400 text-white p-2">
          Add New
        </button>
      </Link>
    </div>
  );
};

export default StudentsPage;

2. 确保路由文件结构与href路径匹配

根据你使用的Next.js路由模式，调整文件目录结构：

• Pages Router（Next.js 12及以下）：
  文件需放在pages目录下，严格对应路由路径：

  pages/
    Admin/
      Students/
        index.tsx  // 对应 /Admin/Students，即你的StudentsPage
        NewStudent.tsx  // 对应 /Admin/Students/NewStudent
  

• App Router（Next.js 13+）：
  使用app目录的路由规则，每个页面需放在单独文件夹下的page.tsx中：

  app/
    Admin/
      Students/
        page.tsx  // 对应 /Admin/Students，即你的StudentsPage
        NewStudent/
          page.tsx  // 对应 /Admin/Students/NewStudent，内容为原NewStudent组件代码
  

3. 验证跳转逻辑

完成上述修改后，点击「Add New」按钮会触发Next.js客户端跳转，直接跳转到/Admin/Students/NewStudent路由并单独显示NewStudent组件内容。

内容的提问来源于stack exchange，提问作者Anum Shahana