使用Next.js 14.1.4点击Link组件跳转时出现404错误求助

你的问题核心是没遵循Next.js 13+ App Router的路由规则：App Router模式下，路由基于文件夹结构创建，每个路由路径对应同名文件夹，且文件夹内必须包含page.tsx文件，单独的hello.tsx文件不会被识别为路由页面。

正确操作步骤 #

• 在项目的app目录下创建名为hello的文件夹
• 将你现有hello.tsx的内容，复制到app/hello/page.tsx文件中（若不存在则新建）
• 重启开发服务器（若之前已启动）

修改后的app/hello/page.tsx代码示例 #

import React from "react";

const Hello = () => {
    return (
        <div>
           <h1>Hello, World!</h1>
        </div>
    );
};

export default Hello;

补充说明 #

• 原app/page.tsx中的Link代码无需修改，href="/hello"的写法是正确的
• 若之前将hello.tsx放在根目录、pages目录等其他位置，在App Router模式下不会被解析为路由页面，因为App Router优先读取app目录下的文件夹路由结构

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