如何在服务器端重定向到其他页面而不重新加载页面，仍然保持在Nextjs应用程序的url ?

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是一个async函数，它期望返回一个包含源和目标属性对象的数组:

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

Answer 2

好的，我有一个解决方案，它不重载，它不改变url..然而，它需要一些客户端脚本。如下例

所示希望你会喜欢它:D

我的codesandbox

index.js(from your codesandbox)

import Link from "next/link";
export default function IndexPage() {
return (
<div>
Hello World.{" "}
<Link href="/something-slug">
<a id="myElem">Go to slug pageee</a>
</Link>
<script
dangerouslySetInnerHTML={{
__html: `
let elem=document.getElementById('myElem')
elem.addEventListener('click',async function(event){
event.preventDefault()
console.log(event.path[0].href)
let myFetch=await fetch(event.path[0].href)
let text=await myFetch.text()
let newHTML=document.createElement('html')
newHTML.innerHTML=text
let _next=document.getElementById('__next')
_next.innerHTML=""
let requestedNext=[...newHTML.getElementsByTagName('div')].filter(a=>a.id=="__next")[0]
let scripts=[...requestedNext.getElementsByTagName('script')]
scripts.forEach(a=>eval(a.innerHTML)) //eval any scripts sent by YOUR requested _next
console.log(requestedNext)
_next.innerHTML=requestedNext.innerHTML
})
`
}}
></script>
</div>
);
}

slug.js(同样，从你的codesandbox)

export default function AboutPage() {
return <div>About us</div>;
}
export async function getServerSideProps({ query, req, res }) {
return {};
}