所有预加载的链接的Next.js 404错误

Question

我是next.js的新手，第一步，在开始开发实际应用之前，我正在关注文档以学习基础知识，而现在，我正努力尝试使预取工作正常进行，因为所有预加载的请求都返回404错误。

那么我的代码有什么问题？我该如何解决这个问题？

演示存储库位于github上。

Answer 1

请注意，只有express个服务器知道如何处理此类/post/:id的URL，next.js不知道，因此next.js会尝试预取不存在的页面（您会可能会在Chrome控制台的输出中看到）。

您可以轻松解决此问题：只需以这种方式重写链接

<Link href={`/post/?id=${show.id}`} as={`/post/${show.id}`} prefetch>

因此，将仅执行一个查询以预取post.js页。

这种技术称为“路由屏蔽”，您可以在Next.js tutorial

中详细了解

更新： 似乎更多的问题是有关prefetch功能在Next.js中的实际工作方式，因此我将尝试对其进行解释。 在链接上没有prefetch道具的情况下，Next.js将按需加载相关块（当用户单击链接时），因此将导致加载和解析javascript的延迟很小。 prefetch道具可让您消除此延迟，因为在应用程序启动后将尽快加载javascript。在这两种情况下，新页面都将像通常的React应用程序一样在浏览器中呈现。

Answer 2

请勿使用：import Link from "next/link";

使用：import { Link } from './routes';这是routes.js配置文件

我的routes.js：

const routes = (module.exports = require("next-routes")());
routes.add("/:username", "profilepage");

使用：

import { Link } from './routes';
<Link route={"/my_page"}><a href="my_page">My Page</a></Link>