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.

What router are you using?. You should check out React Router, reacttraining.com/react-router — Joshua
– Joshua, Commented May 19, 2020 at 10:41
@Joshua Am using the same. But didn't find any help on a subdomain for that. — Harsha M V
– Harsha M V, Commented May 21, 2020 at 9:02
This sounds like it's something that would not be handled by client/react-router but rather by your server that your SPA is served on. Assuming all three sub-domains serve the same React codebase I suggest you figure out what the subdomain is from the code you posted above and render different components conditionally, i.e. if it's admin show render only admin-specific routes/links/navigation, etc... — goto
– goto, Commented May 21, 2020 at 10:32
@HarshaMV I've implemented what you're trying to achieve once, but I don't have access to the codebase anymore to give you some examples. Create a global router i.e BaseRouter, then admin, moderator, etc should then have their own routers. More like a router with child routers. You can then add authentication to each route. — Joshua
– Joshua, Commented May 22, 2020 at 13:33

Krzysztof Cieslinski · Accepted Answer · 2020-05-21 12:54:21Z

19

+25

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

edited May 21, 2020 at 12:54

answered May 21, 2020 at 11:09

Krzysztof Cieslinski

9349 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harsha M V Over a year ago

How do I get Users to login? Since all the three logins are different?

Krzysztof Cieslinski Over a year ago

You can add /sign-in route for every single role, each pointing to different sign in component. Then admin.example.com/sign-in will point to different component than moderator.example.com/sign-in. In that way you can still use the same logic transparently of the user role. E.g. if it's not authenticated, just push to /sign-in

Tron · Accepted Answer · 2020-11-24 07:47:32Z

1

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

edited Nov 24, 2020 at 7:47

answered Nov 13, 2020 at 13:11

Tron

478 bronze badges

Collectives™ on Stack Overflow

Subdomain Routing in React and React Router

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related