Reactjs 如何处理URL驱动的React站点区域设置的CSS

我在一个网站上工作（React通过

创建React应用程序
，所有组件的Sass），其CSS和数据由URL驱动。URL的组成如下所示：

www.mysite.com/：brand-：locale

这4个品牌中的每一个都有自己的颜色/字体/bg图像/等等。每个地区都有自己的数据文件，因为网站被翻译成多种语言。每个区域设置也可能具有独特的样式

示例：


www.mysite.com/brand1-en（brand1风格，英文内容）
www.mysite.com/brand1-fr-ca（brand1 styles，法属加拿大内容）
www.mysite.com/brand2-pt-br（品牌2风格，葡萄牙-巴西内容）
www.mysite.com/brand3-en（品牌3风格，英文内容）

现在，我的项目基于以下范例：


所有品牌区域设置组合共享基本（非品牌）CSS（每个组件在/src中定义），因为所有站点的结构都是相同的
每个品牌都有一个特定于品牌风格的公开/公开Sass文件
每个区域设置都有一个Sass文件，该文件导入相应的品牌Sass文件，并且还可以有自己独特的样式
我使用节点sass在构建运行后编译sass，并将每个语言环境的CSS输出到其各自的文件夹中
应用程序读取URL，并在运行时以编程方式将对相应语言环境CSS文件的引用添加到
每个语言环境在/public中各自的文件夹中都有自己的数据文件，在加载应用程序时会获取该文件（此处没有问题，仅供参考）

我想找到一个更好的方式，样式的网站上的网址，但我不知道如何。我在应用程序加载（显示非品牌样式）和添加CSS标记之间得到了FOUC。似乎应该有一种方法在组件中加入品牌差异，但我不认为这不会迫使所有品牌的CSS同时加载到浏览器中

有人有什么想法吗？
这可能会有帮助。@JuanMarco谢谢。我最终使用了你的链接，并看到了类似的方法。很高兴它有用@Dave。这可能会有帮助。@JuanMarco谢谢。我最终使用了你的链接和类似的方法。很高兴它有用@Dave。