NextJS本地化-在不重新加载页面的情况下更改位置

Question

我正在尝试将本地化添加到我的项目中，由于我使用的是nextjs，所以我选择使用默认的内置本地化。问题是，当你在动态路线上时，我不喜欢它如何进行本地化，我想询问Stackoverflow的主谋，看看是否有解决方案。

请参见。。有一个名为gamerpay.gg的网站，它正是我想要的。它改变了没有页面的本地化；重新加载"；并且当定位改变时保持在动态路线上。我知道他们也在使用nextjs。

因此，如果你访问Gamerpay.gg，你会在上面的导航栏中看到一个本地化下拉列表。试试看我的意思。

"；重新加载"；在这个时间点上，没有实际的浏览器窗口是不重要的重要的是通过本地化来修复动态路由。

让我们获取一些代码：

我使用的是Nextjs内置的带有链接组件的区域设置切换器：

<Link href="" locale="en">
<a className={styles.flag} id="lang_switcher">
<Image src="/flags/en.png" height={20} width={20} layout="fixed" />
</a> 
</Link>

如果我在根上"/"页面(索引(的。本地化是有史以来最美丽的东西。但是一旦我跳到一些动态路由。。然后我开始变得悲伤。

上面的链接组件正在我的页脚组件中的每一页上运行。提到这一点可能很重要。

现在，问题是：http://localhost:3000/p/4829/如果我正常访问该网址，那么一切都正常。但是，如果我向下滚动到页脚并按下链接组件来更改语言，那么url就会变成http://localhost:3000/en/p/[post_id]/

我在他们的官方文件上看到的是；容易修复"；为此。我得耍点小把戏。这就是为什么我请Stackoverflow社区看看是否有更好的选项可以通过使用本地化按钮来保持url/不破坏url。

呜呜！

===更新==========================

是的。我调查了nextjs路由器，发现了一个"；asPath"；里面的物体。如果我加上"；路由器.asPath"；到我的href，那么我就可以在进行翻译时保持在正确的页面上。在测试一段时间之前，我不会将其标记为我的答案。：D

<Link href={router.asPath} locale="en">
<a className={styles.flag} id="lang_switcher">
<Image src="/flags/en.png" height={20} width={20} layout="fixed" />
</a> 
</Link>

Answer 1

我一直在测试，正如你们中的一个人建议的那样，我应该发布答案(我忘了，对不起哈哈(。

解决方案确实是使用asPath。工作顺利。

<Link href={router.asPath} locale="en">
<a className={styles.flag} id="lang_switcher">
<Image src="/flags/en.png" height={20} width={20} layout="fixed" />
</a> 
</Link>