时间戳

首页 > 解决方案 > 如何在不重新加载页面的情况下将服务器端重定向到其他页面并且仍然将 URL 保留在 Nextjs 应用程序中？

javascript - 如何在不重新加载页面的情况下将服务器端重定向到其他页面并且仍然将 URL 保留在 Nextjs 应用程序中？

问题描述

我有一个[slug].js页面将获取 API 以获取目标页面

export async function getServerSideProps({ query, res }) {
    const slug = query.slug;
    try {
        const destination = await RoutingAPI.matchSlug(slug);
        res.writeHead(302, { Location: destination });
        res.end();
        // return {
        //     redirect: {
        //         permanent: true,
        //         destination,
        //     },
        // }
    } catch (error) {
        return {
            notFound: true
        }
    }
}

如果我客户端从另一个页面重定向到 slug 页面，它可以工作并保持 URL 与 slug 相同，但它会使浏览器重新加载。如果我使用

return {
     redirect: {
        permanent: true,
        destination,
     },
}

它不会重新加载浏览器，但会将 URL 更改为目标，与 slug 不同。我该如何解决这个问题？我会很感激任何想法，谢谢

标签： javascriptreactjsnext.jsserver-side-rendering

解决方案

您可以使用重写来实现此目的。从文档：

重写允许您将传入请求路径映射到不同的目标路径。

在你next.config.js添加这个：

module.exports = {
  async rewrites() {
    return [
      {
        source: "/:slug",
        destination: "/your-destination",
      },
    ];
  },
};

rewrites 是一个异步函数，它期望返回一个数组，其中包含具有源和目标属性的对象：

  • source 是传入的请求路径模式。
  • destination 是您要路由到的路径。

推荐阅读