javascript - React 和 React Router 中的子域路由
问题描述
我有 3 种类型的用户,我们希望为项目维护相同的代码库,而不是拥有 3-4 个代码库,因为大多数视图只是对用户类型的主观。
管理员 > admin.example.com
版主 > moderator.example.com
品牌 >brands.example.com
我的 React App 结构
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
每种类型的用户都有自己的身份验证以允许访问内部路由。我找到了一个函数来分割域并使用以下方法进行路由:
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 中处理基于子域的路由的正确方法吗?我从来没有为多种用户类型使用过一个代码库。对正确的实施感到困惑。
解决方案
您应该检查当前 url 的子域并将其与特定用户角色匹配,然后在反应路由器中您可以使用该简单逻辑,以便仅呈现特定于角色的路由:
<Router history={history}>
{isAdmin &&
<Route component={AdminViews} />
}
{isModerator &&
<Route component={ModeratorViews} />
}
...
<Route path="/tnc" exact={true} component={CommmonRouteForAllRoles} />
</Router>
例如 AdminViews 可能如下所示:
export const AdminViews = () => {
return (
<Switch>
<Route path="/" exact={true} component={AdminHome} />
<Route path="/other" exact={true} component={AdminOtherRoute} />
<Route path="/sign-in" exact={true} component={AdminSignIn} />
</Switch>
);
};
推荐阅读
- javascript - Sequelize 包含模型但没有表名
- java - 如何 Dockerize Jmeter(使用 Docker 和 Jmeter 进行分布式测试)
- aws-lambda - 无法为 AWS Lambda 创建最新的无头 chrome
- r-markdown - 在 rmarkdown 文档中使用 YAML 变量
- symfony - 命令文件中的可为空值
- spring-boot - Spring Boot 2 + Angular 8 - 通配符 URL 模式
- vega-lite - 使用数据作为数组而不是 Vega Lite 的表
- ruby-on-rails - 使用 find_each 时有没有办法按特定列排序?
- javascript - 使用 chrome 扩展在 contetnteditable 中下划线文本
- javascript - React 性能 - DOM 样式和组件渲染