动态模式路由与NextJS类似的Instagram

Question

我正在寻找帮助我解决以下问题的人：

我正在尝试使用NextJS实现一个模态系统，其中模态依赖于路由。

所以说我在下面的页面上：

website.com/help

并说我有模态category1、category2和category3，我希望所有这些都能在关闭它们后保持(它们正在加载iframe(，但这不是必须的。

那么我希望这些模式的路线是：

website.com/help/category1
website.com/help/category2
website.com/help/category3

我已经在官方的NextJS示例中发现了这一点：路线为模式

但我遇到的问题是，对于queryString路由，当您直接重新加载/访问模态路由时，不会使用模态。因此，内容将变成全屏(它是自己的一个页面(。

对于动态路由，这不是问题，因为如果您直接访问模态路由，则会保留模态。但我遇到的问题是，这些情态动词并不完全是情态动词；在"后面"；模态就变成了身体的背景。另一个问题是我无法坚持这些。

这是stackblitz上的演示：

https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-route-as-modal?file=README.md

我非常感谢任何人帮我解决这个问题，因为这真的让我抓狂！

Answer 1

我有一个您可能喜欢的解决方案。对于您提供的示例，您只需要像在/index.js中那样在/article/[articleId].js中导入<Grid/>

因此，当你打开模态时，文章/帖子列表会显示在后台中

// article/[articleId].js
import Grid from '../../components/Grid';
<>
<Modal
isOpen={true}
onRequestClose={() => router.push('/', undefined, { scroll: false })}
contentLabel="Post modal"
>
<Article id={articleId} pathname={router.pathname} />
</Modal>
<Grid />
</>

不要忘记在router.push()和<Link/>中给scroll加false，这样当你回到文章/帖子列表时，它就不会跳到页面的顶部

router.push('/', undefined, { scroll: false })
<Link 
key={index}
href="/article/[articleId]"
as={`/article/${id}`}
scroll={false} 
>
<a className={styles.postCard}>{id}</a>
</Link>

您可以在这里看到一个示例：https://stackblitz.com/edit/github-rkrovd