Dear Developer Community,

I hope you are having a pleasant coding day. I am currently facing a puzzling issue with page routing in my React project and am seeking your assistance.

I have two tsx files in my project: page.tsx and test.tsx. In page.tsx, I am using the <Link> component to create a hyperlink pointing to "/layout", as shown below:

jsx
Copy code
// /app/page.tsx:
<Link href="/layout" legacyBehavior>
<a>jump~~~</a>
</Link>
In test.tsx, I have a simple React component designed to display some text content, as follows:

jsx
Copy code
// /app/test.tsx:
import React from 'react';

const test = () => {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<h1 className="text-4xl font-semibold mb-8">YEEEEEE</h1>
</main>
);
};

export default test;
The issue I'm encountering is that when I click on the link in the page component, I expect to navigate to the test component, but instead, I am greeted with a 404 not found error. I have checked my routing configurations but still can't pinpoint the cause of the issue.

Could you please assist me in determining why this error occurs? I suspect there might be a detail I'm missing in the link setup or routing configuration.

Thank you very much for your time and assistance!

Best regards,
Jeffrey