本文旨在解决 Next.js 13.4 版本中，由于不符合新的路由约定导致创建多页面时出现的 404 错误。我们将深入探讨 Next.js App Router 的路由机制，并提供清晰的示例和解决方法，帮助开发者快速构建多页面应用。
在 Next.js 13.4 及更高版本中，App Router 引入了基于目录的路由系统，这与之前的 pages 目录有所不同。 理解这种新的路由约定是避免 404 错误的关键。
App Router 的路由机制
App Router 的核心思想是：目录结构决定路由路径，而 page.js (或 page.ts) 文件则负责渲染该路径对应的页面。 简单来说，每个包含 page.js 文件的目录都会被视为一个路由。
例如，以下目录结构：
app/ page.js // -> http://localhost:3000/ foo/ page.js // -> http://localhost:3000/foo bar/ page.js // -> http://localhost:3000/foo/bar test/ page.js // -> http://localhost:3000/test
在这个例子中，app 目录下的 page.js 文件对应根路由 /。 foo 目录下的 page.js 对应 /foo 路由。以此类推。
解决 404 错误
如果你在 Next.js 13.4 中创建了多个页面，但访问时却遇到 404 错误，很可能的原因是你的文件结构不符合 App Router 的约定。
以下是一个错误的示例：
app/ globals.css layout.js page.js // -> http://localhost:3000/ page2.js // 期望 -> http://localhost:3000/page2 但会返回 404
在这个例子中，page2.js 文件直接位于 app 目录下，这不符合 App Router 的路由约定。 Next.js 不会将其识别为一个独立的路由。
正确的做法是创建一个新的目录，并在该目录下创建 page.js 文件：
app/ globals.css layout.js page.js // -> http://localhost:3000/ page2/ page.js // -> http://localhost:3000/page2
现在，page2 目录下的 page.js 文件将对应 /page2 路由。
示例代码 (page2/page.js):
// app/page2/page.jsexport default function Page2() { return (
This is Page 2
注意事项:
确保你的文件名是 page.js 或 page.ts。目录名将成为路由路径的一部分。layout.js 文件用于定义布局，它会包裹所有页面。
总结
Next.js 13.4 的 App Router 带来了全新的路由机制。 理解基于目录的路由约定是避免 404 错误的关键。 通过将页面文件放置在正确的目录结构中，并遵循 page.js 命名规则，你可以轻松创建多页面应用。 请务必参考 Next.js 官方文档，深入了解 App Router 的更多特性和最佳实践。
以上就是Next.js 13.4：解决创建多页面时出现的 404 错误的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1511210.html
微信扫一扫 
支付宝扫一扫 
