预取不适用于动态路由 Next.js答案

【问题标题】：Prefetching not working on dynamic routes Next.js预取不适用于动态路由 Next.js
【发布时间】：2020-06-12 09:08:30
【问题描述】：

我从 API 或动态获取所有链接，但在预取它们时遇到问题，我似乎无法弄清楚原因。

所有页面都是服务器端渲染的。

每次我悬停链接时都会收到此错误：

GET https://development.server/_next/static/0_YgyPL5ev7zYK3SSr7J-/pages/page.js net::ERR_ABORTED 404. page-loader.js:33

我正在使用的链接示例

onst Header = ({ props, slugTv }) => {
  const router = useRouter();
  const { tv } = router.query;

  return (
      <header>
        <div className="header">
          <Link href="/[tv]/" as={`/${tv}/`}>
            <a>
              <img src={renderSwitch(tv)} alt={`${tv} logo`} />
            </a>
          </Link>
        </div>
      </header>

如果我错过了一些重要的细节，请发表评论，我会更新问题，这是我的下一个项目。

更新：

页面文件夹树

-pages
--[tv]//folder
--category//folder
---[cat].js
--index.js
-index.js

谢谢

【问题讨论】：

它可能只发生在开发模式下。您是否尝试过构建并启动生产服务器并再次检查？您可以通过运行 next build 和 next start 来实现。
@Hangindev 是的，此错误来自实时服务器，但处于开发管道阶段。
抱歉，您的意思是“此错误不是来自实时服务器，而是在开发管道阶段。”？
我明白了。根据Next.js Docs，Next.js 不会预取开发页面。
好的。你在[tv].js中设置了getStaticProps、getStaticPaths和getServerSideProps吗？

标签： reactjs next.js

【解决方案1】：

我认为这可能与您的 as 中的尾随 / 有关。

改成这样，应该可以了：

<Link href="/[tv]/" as={`/${tv}`}>

从错误来看，它似乎正在尝试预取：https://development.server/_next/static/0_YgyPL5ev7zYK3SSr7J-/pages/page.js

而它应该尝试获取： https://development.server/_next/static/0_YgyPL5ev7zYK3SSr7J-/pages/[tv].js

因此，看起来它将链接解释为一个全新的页面，而不是您指向的 href。（不匹配？）

我发现 this 可能相关

【讨论】：