我正在使用create-react-app构建一个React应用,并托管在Netlify上。
该应用程序是双语的,尽管用户可以切换内容显示的语言,但应根据位置默认设置。具体来说,来自日本的用户默认情况下应以日语查看内容,而来自其他地方的用户目前应默认以英语查看内容。
Netlify提供了一些neat tools,用于检测用户的原籍国并使用它来确定将用户发送到哪里。但是,我只是与他们的帮助团队进行了详尽的讨论,我们无法提出一种解决方案,该解决方案既处理从所有非根路径到我的核心index.html
文件的重定向(直接链接所必需)传递给我的SPA中的子路径),同时还向日本用户提供了同样的功能,同时传递了他们在日本的信息。
类似地,我在前端尝试了多种解决方案,通过点击IP API来检测用户IP和国家(这不理想,因为它会增加延迟,但总比没有好。但是我尝试过的所有解决方案(实际上是this page上的每个免费选项)都被我的广告阻止程序阻止了-既然其他人都有广告阻止程序,那是一个非常不理想的解决方案。
我愿意代理请求,以便广告阻止程序不会阻止它,但我有另一个想法,我希望首先尝试:
为我的应用程序生成2个单独的index.html
入口点-一个用于日本,一个用于世界其他地区。每个入口点将加载相同的JS代码,但将具有不同的根节点,然后我的应用程序可以从中检测到该语言。在这种情况下,一个应用可能具有以下功能:
<div id="root" class="lang-jp"></div>
所以,问题是
是否可以使用Netlify重定向根据原产国将两个不同的index.html
入口点重定向到我?
我尝试将public/index.html
复制到public/jp-index.html
文件(具有添加的CSS类)并使用以下_redirects
文件,但是当我来自任何一个国家的访问:
index.html
关闭反向操作(如下):找到了/* /index.html 200
/* /jp-index.html 200 Country=jp
文件,但是由于没有jp-index.html
插值处理,因此无法加载应用程序,所以我结束了HTML文件没有指向我的JS应用(以及收藏夹图标等)的有效链接:
%PUBLIC_URL%
不太确定create-react-app如何确定将哪个文件用作应用程序的HTML根目录以及如何进行插值。我已经poked around,但是没有找到与我的用例完全匹配的内容(多个 HTML 入口点)。这个想法可行吗?关于如何使它起作用的任何想法? (理想情况下不会弹出,但我也对此持开放态度)。
更新:
我意识到(duh)相关的HTML文件位于/* /jp-index.html 200 Country=jp
/* /index.html 200
目录中,并将其作为build命令的一部分写入该目录中。所以我想出了一个主意,那就是在构建命令中添加一个步骤,将插值后的build
文件复制到build/index.html
文件中,该文件的区别仅在于该类已添加到根节点。
正确的build/jp-index.html
文件是从日本加载的,但是对相关CSS / JS文件的请求取而代之的是获取相同的jp-index.html
文件,这是因为Netlify重定向。不知道如何解决这个问题,但是想分享一下,以防其他人想到任何东西。