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

Question

我有一个[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 不同。我该如何解决这个问题？我将不胜感激任何想法，谢谢

Answer 1

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

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

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

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

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

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