Next.js>如何实现基于动态路由的模态

2fjabf4q  于 2022-12-12  发布在  其他
关注(0)|答案(1)|浏览(155)

是否可以在Next.js 13中实现基于动态路由的模态(使用app目录)?
作为参考,我打算创建一个类似于nomadlist(和instagram)主页的流程,这样当你点击一张卡片时,就会出现一个带有更新路线的模态,即https://nomadlist.com/madeira,当直接访问链接时,你会被带到整个页面。
我还将具有模态的列表项添加到我的应用的根目录中,并且我希望嵌套模态路由URL,如下所示:/users/[userId]

我需要做的是:
  • 在我的应用的列表视图中触发模态时,更新当前URL而不刷新浏览器。(即,使用状态/上下文触发模态)。例如/users/[userId]
  • 当直接访问模态的路线时,即/users/123-43249,以显示用户的整页。

我已经尝试了一堆不同的东西,但似乎不能得到这个工作,所以我更好奇,如果这是甚至可能的,然后再花更多的时间。
我的应用程序的当前结构如下:
第一个
非常感谢你。

yhqotfr8

yhqotfr81#

我能够实现这一点的唯一方法是覆盖打开模态函数的默认行为,并将URL附加到窗口的历史记录中。

const [{ shouldShowModal }, setShouldShowModal] = useProfileModal();

const toggleModal = e => {
  e.preventDefault();
  setShouldShowModal({ shouldShowModal: true, profile });
  window.history.pushState({}, "", `/users/${profile.id}`);
}

export default function ViewProfileButton({ user }: { user: IUser }) {
  return (
    <Link
      as={`/users/${user.id}`}
      href={{
        pathname: "/users/[userId]",
        query: { userId: user.id },
      }}
      scroll={false}
      shallow={true}
      onClick={toggleModal}
    >
      <div>
        View User
      </div>
    </Link>
  );
}

相关问题