Next.js路由配置求助：React应用页面跳转异常及组件集成问题

核心问题分析 #

你遇到的404和导航失效问题，本质是对Next.js Pages路由规则不熟悉：

• Pages目录下的component子目录里的组件不会自动生成路由，Next.js仅会将Pages根目录（或符合规则的子目录）下的文件映射为路由路径
• 使用原生<a>标签会触发浏览器硬刷新，无法利用Next.js客户端路由能力，路径不匹配时直接返回404

步骤1：调整路由结构（适配Pages路由规则） #

保留你的component子目录存放组件，在Pages根目录创建对应路由文件，关联组件：

Pages/
├── index.js          # 首页（默认渲染Signup组件）
├── signin.js         # 登录页路由
├── lostpassword.js   # 找回密码页路由
└── component/
    ├── Signup.js
    ├── Signin.js
    └── Lostpassword.js

步骤2：编写路由页面文件 #

• index.js（首页）：导入并渲染Signup组件，实现首页默认打开注册页

import Signup from './component/Signup';

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

• signin.js（登录页）：导入并渲染Signin组件

import Signin from './component/Signin';

export default function SigninPage() {
  return <Signin />;
}

• lostpassword.js（找回密码页）：导入并渲染Lostpassword组件

import Lostpassword from './component/Lostpassword';

export default function LostpasswordPage() {
  return <Lostpassword />;
}

步骤3：使用Next.js Link组件实现客户端导航 #

在各个组件中替换原生<a>标签为Next.js的Link组件，实现无刷新客户端导航：

Signup.js组件示例 #

import Link from 'next/link';

export default function Signup() {
  return (
    <div>
      <h1>注册</h1>
      {/* 跳转至登录页 */}
      <Link href="/signin">登录</Link>
      {/* 跳转至找回密码页 */}
      <Link href="/lostpassword">忘记密码？</Link>
      {/* 你的注册表单代码 */}
    </div>
  );
}

Signin.js组件示例 #

import Link from 'next/link';

export default function Signin() {
  return (
    <div>
      <h1>登录</h1>
      <Link href="/">返回注册</Link>
      <Link href="/lostpassword">忘记密码？</Link>
      {/* 你的登录表单代码 */}
    </div>
  );
}

Lostpassword.js组件示例 #

import Link from 'next/link';

export default function Lostpassword() {
  return (
    <div>
      <h1>找回密码</h1>
      <Link href="/">返回注册</Link>
      <Link href="/signin">去登录</Link>
      {/* 你的找回密码表单代码 */}
    </div>
  );
}

关键规则总结 #

• Pages路由核心：文件即路由，Pages根目录下的文件直接映射为同名路径（如signin.js对应/signin）
• 客户端导航必须用next/link组件，避免硬刷新导致的404和性能问题
• component子目录仅用于存放复用组件，不会生成路由，需通过路由文件导入使用

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