关于 javascript：React 和 React Router 中的子域路由

Subdomain Routing in React and React Router

我有 3 种类型的用户，我们希望为项目维护相同的代码库，而不是拥有 3-4 个代码库，因为大多数观点只是对用户类型的主观判断。

Admin > admin.example.com

Moderator > moderator.example.com

Brands > brands.example.com

我的 React 应用程序结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

src
-BaseRoutes.js <--- Should handle by subdomain logic
- modules
-- admin
---- AdminRoutes.js <---- handles all Admin route logic
---- components
---- pages
-- moderator
---- ModeratorRoutes.js <---- handles all Moderator route logic
---- components
---- pages
-- brands
---- BrandsRoutes.js <---- handles all Brands route logic
---- components
---- pages
- components
- pages

每种类型的用户都有自己的身份验证以允许访问内部路由。我找到了一个分割域并使用以下方法进行路由的函数：

1
2
3
4
5
6
7
8
9
10
11
12
13

let host = window.location.host;
let protocol = window.location.protocol;
let parts = host.split(".");
let subdomain ="";
// If we get more than 3 parts, then we have a subdomain
// INFO: This could be 4, if you have a co.uk TLD or something like that.
if (parts.length >= 3) {
subdomain = parts[0];
// Remove the subdomain from the parts list
parts.splice(0, 1);
// Set the location to the new url
window.location = protocol +"//" + parts.join(".") +"/" + subdomain;
}

这是在 React 中处理基于子域的路由的正确方法吗？我从来没有为多种用户类型使用过一个代码库。对正确的实现感到困惑。