reactjs - 链接标签只是改变 url 但不渲染页面

Question

我正在尝试学习下一个js路由并遇到错误。

每次我单击链接标签时，它只会将 url 从“localhost:3000”更改为“localhost:3000/sample”，但它不会在我的 sample.js 文件中显示“Hi”

import React from 'react'
import Link from 'next/link'
const Lnkz = () => {
    return (
        <div>
            <Link href={"/sample"} as={'/sample'} >
                <a>CLICK ME</a>
            </Link>

        </div>
    )
}

export default Lnkz

这是我的 sample.js 文件，仅显示“Hi”。

export default function Sample() {
    return (
        <div>
            <h1>hi</h1>
        </div>
    )
}

我的入口文件。

import '../styles/globals.css'
import Lnkz from './Lnkz'

function MyApp({ Component, pageProps }) {
  return (
    <div>

      <Lnkz />

    </div>
  )
}

export default MyApp

注意：我已经尝试过这样做，但它也不起作用。

import React from 'react'
import Link from 'next/link'
const Lnkz = () => {
    return (
        <div>
            <Link href="/sample" as='/sample'>
                <a>CLICK ME</a>
            </Link>

        </div>
    )
}

export default Lnkz

这是我的目录

编辑：添加了我之前也尝试过的代码，并添加了我的目录的屏幕截图。

Answer 1

我认为在看到您的目录后，问题出在外壳上。如果您使用的是旧版本的 next.js，请仅包含“as”，更多内容请参见此处。

试试这个或将您的文件名更改为 sample.js（带有小“s”）

  <Link href={"/Sample"}>
        <a>CLICK ME</a>
  </Link>