App Router中的动态根布局,NextJS 14.0.1

wfveoks0 于 2023-11-18 发布在其他

关注(0)|答案(1)|浏览(94)

**TLDR;

如何基于searchParams动态布局root？

场景我有subdomain.domain.com，它将加载着陆页。如果我扫描一个QR码，返回的URL为subdomain.domain.com?id=123，那么浏览器应该加载一个与着陆页相当不同的UI，除了相同的页眉和页脚。我想把它们都保留为SSR。
如何才能做到这一点？

我的背景
我是一个全新的Web开发大约3周，我从来没有做过一个网页：P.总结我11年的职业路线图，它总是移动的开发（Java Android ->KotlinAndroid -> Swift iOS -> JS React Native -> Flutter -> Typescript Expo）。最近我有机会在没有必要预定义的Tech Stack的情况下热情地在Web上工作。理想情况下，用例是扫描QR ->提取ID ->获取ID注册和预订->给予基于响应的客户端交互。在研究了Modern Frontend Web堆栈后，我觉得它的选项过于臃肿，试图解决捆绑/解析/转译/水合策略/esm-or-cjs等，最初Node和用户开发人员以DX的名义创建的。在我的用例中，我真的很想使用HTMX+顺风，但由于我的其他团队成员，我选择了类似于React的东西，但“速度快得惊人”。所以我选择了NextJS用于SSR
任何想法，建议，意见或任何有助于最终用户UX的东西都将受到欢迎。
先谢了。

next.js

来源：https://stackoverflow.com/questions/77469786/dynamic-root-layout-in-app-router-nextjs-14-0-1

1条答案

按热度按时间

omqzjyyz1#

在NextJS 13.4+的应用程序路由器中，应用程序文件夹中的布局文件在所有页面之间共享，因此您可以在其中设置页眉和页脚（与所有页面共享）。
如果你对QR码有任何控制，我建议将URL更改为subdomain.domain.com/123，因为它允许你使用动态路由，这将使你的生活更轻松，因为它允许你直接根据服务器组件中的路由ID获取数据。
如果你不能改变它，你可以让他们在页面上与这样的东西：

export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string };
  searchParams?: { [key: string]: string | string[] | undefined };
}) {
  // Handle logic for searchParams id as undefined or use fetch based on it.
}

字符串
这意味着您需要处理在无id或已定义id之间切换的逻辑，以切换页面。

赞(0）回复(0）举报 2023-11-18

我来回答

App Router中的动态根布局,NextJS 14.0.1

1条答案

相关问题

热门标签

最新问答