React 和 React Router 中的子域路由 [英] Subdomain Routing in React and React Router

问题描述

我有 3 种类型的用户，我们希望为项目维护相同的代码库，而不是在大多数视图只是针对用户类型的情况下拥有 3-4 个代码库.

I have 3 types of users and we want to maintain the same code base for the project instead of having 3-4 code bases when most views are just subjective to the kind of users.

管理员 >admin.example.com

Admin > admin.example.com

版主>版主.example.com

Moderator > moderator.example.com

品牌 >Brands.example.com

Brands > brands.example.com

我的 React App 结构

My structure of the 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

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

Each type of user will have its own authentication to allow access to inner routes. I found a function to split the domain and do the routing using the following:

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 中处理基于子域的路由的正确方法吗?我从来没有为多种用户类型使用过单一的代码库.对正确的实施感到困惑.

Is this the right way to handle subdomain based routing in React? I have never used a single code base for multiple user types. So confused about the right implementation.

推荐答案

您应该检查当前 url 的子域并将其与特定的用户角色匹配，然后在反应路由器中您可以使用该简单逻辑，以便仅呈现特定于角色的路线:

You should check subdomain of current url and match it with specific user role, then in react router you could use that simple logic, in order to render only role specific routes:

<Router history={history}>
          {isAdmin &&
            <Route component={AdminViews} />
          }
          {isModerator &&
            <Route component={ModeratorViews} />
          }
...
          <Route path="/tnc" exact={true} component={CommmonRouteForAllRoles} />
</Router>

例如哪里AdminViews 可能如下所示:

Where e.g. AdminViews could look like this:

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>
  );
};

这篇关于React 和 React Router 中的子域路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！