我是 next.js 的新手，作为第一步，在我开始开发实际应用程序之前，我正在按照文档学习基础知识，现在，我正在努力使预取工作，因为所有预加载的请求返回 404 错误。
那么我的代码有什么问题？我怎么解决这个问题？
演示存储库位于github 上。
所有预加载链接的 Next.js 404 错误
IT技术
javascript
reactjs
next.js
2021-05-23 13:04:03
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 教程中阅读更多信息
更新：
似乎问题更多地是关于prefetch功能在 Next.js 中的实际工作方式，因此我将尝试对其进行解释。如果prefetch链接上没有prop，Next.js 将按需加载相关块（当用户单击链接时），因此它会导致加载和解析 javascript 的小延迟。该prefetchprops可以让你因为JavaScript会之后开始申请，尽快装载删除此延迟。在这两种情况下，新页面都会像通常的 React 应用程序一样在浏览器中呈现。
不要使用这个： import Link from "next/link";
用途：import { Link } from './routes';这是routes.js的配置文件
我的路线.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>