基于NextJS类Instagram的动态模式路由

Question

我想找人帮我解决以下问题：

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

所以说我在下面这一页：

website.com/help

假设我有modals category1、category2和category3，所有这些我都希望能够在关闭它们之后保持不变(如果它们正在加载)，但是这不是必须的。

那么，我希望这些调制解调器的路线是：

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

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

因此，当您打开模式时，文章/帖子列表将显示在后台。

// 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 />
</>

不要忘记让scroll在router.push()和<Link/>中为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