使用客户端路由构建Next.js多语言应用程序

时间:2019-07-16 07:58:06

标签: reactjs routing internationalization next.js dynamic-routing

我目前正在与打算在S3存储桶中托管的Next.js一起使用多语言应用程序。 在此站点中,我需要通过从一条路由到另一条路由的客户端路由来维护跨路由的应用程序状态。

由于我需要支持40多种语言和国际化,因此流程如下:

  • 在next.config.js中,使用exportPathMap生成/ [language]路由,并在“ query”中包含一个包含该语言特定语言环境的变量。

  • 将此语言环境加载到_app的getInitialProps中,并将其传递给提供程序,以使用上下文API在应用程序的任何部分中使用。

  • 为支持客户端路由,我将next / link组件包装在一个自定义Link中,该链接向下传递所有prop,并将“ as” prop设置为“ / [language] / [route]”。

该解决方案目前可以使用,但是理想情况下,我不需要使用“ as”道具“模拟”路由。我发现接下来的动态路由不允许以客户端路由的方式来避免将页面刷新为与动态路径匹配的新.html文件。 例如: 使用以下目录结构:

/pages
   index.tsx
   /[lang]/
       home.tsx
       dashboard.tsx

在index.tsx中,单击下一个/重定向到/en/dashboard的链接上的链接将触发对服务器的请求并完全刷新页面。因此,丢失了客户端状态。

是否有更好的解决方案?这似乎是一个非常普遍的问题,但我无法使用Next.js找到一个优雅的解决方案。

0 个答案:

没有答案