Subdomain Routing in React and React Router

Question

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 > admin.example.com

Moderator > moderator.example.com

Brands > brands.example.com

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

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.

Answer 1

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>

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

Answer 2

I guess your server should be able to achieve this e.g, you can create subdomains for admin and moderator while the user domain will be the base route, so if admin is to login, he goes to admin.yourapp.com, and moderator goes to moderator.yourapp.com and then handle auth logic, the view won't really be a problem if you use react-router then