NEXT.JS 样式（布局）在路由页面（组件）中不起作用

问：

没有错误消息，但我有一个问题，那就是当我在page.tsx中放置一些代码并运行我的Next.js项目时，样式（和布局）正常工作。

但是，在另一种情况下，尝试使用与路由页相同的代码时会出现问题。

按如下所示更改 page.tsx 代码，并将原始代码移动到“component”文件。（页面/组件/component.tsx）

import Image from 'next/image'
import Link from 'next/link'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1>Hello world!</h1>
      <h2>123</h2>
      <Link href="/components/component">GoToComponent</Link>

    </main>
  )
}

按“GoToComponent”导航到“component”（与原始 page.tsx 内容相同的代码。

而且样式不起作用！

我应该怎么做才能使样式起作用？