reactjs - 在Next.js网站中打开页面作为覆盖

Question

我有一个搜索网站。我希望用户能够单击搜索结果并以重叠形式打开产品，而不是重新加载整个页面，但是我希望网址栏中的网址是正确的产品页面，因此该用户复制并将其粘贴或在新标签页中打开，他们将获得产品页面。我还希望后退按钮在两种情况下都可以使用。

这是该过程的更详细说明。

用户导航到/list？keywords = widget

的列表页面

用户点击产品

产品的内容在叠加层上进行动画处理，但列表页面未卸载，但仍在产品页面

下方

URL栏会更新，以反射(reflect)用户位于/products/123上，但实际上未加载产品页面。

如果用户单击“后退”按钮，则覆盖层消失。

如果用户在覆盖层打开时单击刷新按钮，他们将获得产品页面的ssr版本，下面的列表页面将不再存在。

起初我以为我可以使用Next/Router上的{shallow:true}选项使它起作用，但是文档专门说这仅适用于相同的页面导航(带有不同的查询字符串)。
我唯一的想法是我可以将链接设置为适当的链接，但可以在浏览器中劫持该链接，以便在历史记录状态下使用纯JavaScript进行操作，但是我不确定是否可以从等式中删除“下一台路由器”。
需要明确的是，我不是在产品页面或叠加本身上寻求帮助，我可以轻松创建在两种情况下都显示相同内容的共享组件，特别是我请求帮助的路由和URL问题。
任何帮助，甚至只是指向正确方向的指针，都将不胜感激。

Answer 1

这是我的方法。
您需要创建一个optional catch all route。即:pages/search/[[searchParams]].tsx

import { useRouter } from 'next/router';
import { GetServerSidePropsContext } from 'next';
import { ProductsView, ProductDetailsView } from '@/views';

export async function getServerSideProps({
  params,
}: GetServerSidePropsContext) {
  const [productId = null] = (params?.searchParams as string[]) || [];
  return {
    props: {
      productId,
    },
  };
}

interface Props {
  productId?: string;
}

function SearchProductsPage({ productId }: Props) {
  const router = useRouter();

  // You could use next/link in your views instead of using next/router
  const onViewDetails = (productDetailsId: string) => {
    router.push(productDetailsId, `product/${productDetailsId}`).catch((e) => {
      console.error(e);
    });
  };
  // Going back to /search will remove the productId and the overlay view will be removed 
  const onClose = () => {
    router.push('/search').catch((e) => {
      console.error(e);
    });
  };

  // If you have a productId (catch from URL and received via Props)
  // it will render the Product details view which contains the overlay and the product details
  return (
    <>
      <ProductsView onViewDetails={onViewDetails} />
      {productId && <ProductDetailsView productId={productId} onClose={onClose} />}
    </>
  );
}

export default SearchProductsPage;

请注意，路由到 /product/${productDetailsId}而不是 product/${productDetailsId}将给您一个错误。因此，有了此代码，您将得到像 /search/product/1这样的URL，而不是 /product/1这样的URL。
但是您可以创建一个单独的页面(即 pages/product/[productId].tsx)，以呈现产品详细信息 View ，而不是覆盖页面。