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

【问题标题】：Next.js 404 error for all preloaded links所有预加载链接的 Next.js 404 错误
【发布时间】：2019-09-17 03:08:39
【问题描述】：

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

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

演示库位于github。

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

不要使用这个：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>

【讨论】：

【解决方案2】：

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

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

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

因此，只会执行一个预取post.js 页面的查询。

这种技术称为“路由屏蔽”，您可以在Next.js tutorial 中了解更多信息

更新： 似乎问题更多的是关于 prefetch 功能在 Next.js 中的实际工作原理，所以我将尝试解释它。如果 Link Next.js 上没有 prefetch 属性，它将按需加载相关块（当用户单击链接时），因此会导致加载和解析 javascript 的一小段延迟。 prefetch 属性允许您消除此延迟，因为 javascript 将在应用程序启动后尽快加载。在这两种情况下，新页面都将在浏览器中呈现，就像在通常的 React 应用程序中一样。

【讨论】：

我在添加自定义服务器之前使用了“路由屏蔽”，但是刷新页面或直接访问帖子页面时出现404错误。所以我认为自定义服务器可以解决这个问题，而无需再屏蔽客户端中的路由。我回家后测试一下。谢谢！
你需要同时使用这两个功能
我记得为什么我在客户端中删除了as 属性：当它存在时，预取似乎被忽略了。正如您在上传的图片中看到的那样，没有发出预取请求。每个帖子的 10 个请求在哪里可用？
从我提供的屏幕截图中，您可能会看到 page.js 的 javascript 是从首页预加载的。应用不会发出 10 个请求，因为您的应用中没有 10 个不同的页面，您只需向该页面传递不同的参数。
您似乎对“预加载”在这种情况下的实际含义感到困惑。 Next.js 不会为你的页面预加载数据，它不会为页面渲染 html，它只会为页面预加载 javascript，当你稍后打开它时，这个页面将完全在浏览器中渲染