NextJS中如何通过路由链接组件？404问题及目录结构疑问

API 探路者

2026-7-28

Next.js 路由跳转问题解决方案

为什么会出现404错误？

Next.js（Pages Router模式）的路由规则是基于src/pages目录结构自动生成的，只有放在这个目录下的文件才会对应到具体路由。你把Dashboard组件放在src/components里，这个目录不会被识别为路由页面，所以访问/dashboard自然会返回404。

不需要把所有组件移到pages目录

components目录用来存放可复用的业务组件是完全合理的，你只需要在pages目录下创建路由入口页面，再在这个页面里引入components中的Dashboard组件即可。

具体实现步骤

创建路由入口页面
在src/pages下新建dashboard.jsx（或.tsx）文件，内容如下：

import Dashboard from '../components/Dashboard';

export default function DashboardPage() {
  return <Dashboard />;
}

这样/dashboard路由就会自动映射到这个页面文件，它的作用就是渲染你放在components里的Dashboard组件。

修正Link的写法
你原来的按钮嵌套Link的写法可能会触发Next.js的默认行为问题，推荐两种更稳妥的写法：

写法一：用Link直接包裹按钮

import Link from 'next/link';

// ...
<Link href="/dashboard">
  <button type="button" className="btn">Login</button>
</Link>

写法二：使用useRouter手动跳转（适合需要在跳转前执行逻辑的场景）

import { useRouter } from 'next/router';

// ...
const router = useRouter();

const handleLoginClick = () => {
  // 可以在这里加登录验证等逻辑
  router.push('/dashboard');
};

// ...
<button type="button" className="btn" onClick={handleLoginClick}>
  Login
</button>