javascript - Subdomain Routing in React and React Router - Stack Overflow

admin管理员组

文章数量:1193728

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

Moderator > moderator.example

Brands > brands.example

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.

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.

• javascript
• reactjs
• react-router
• subdomain

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked May 19, 2020 at 6:26 Harsha M VHarsha M V 54.9k129129 gold badges363363 silver badges535535 bronze badges 7

• What router are you using?. You should check out React Router, reacttraining.com/react-router – 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 Commented May 21, 2020 at 9:02
• 1 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 Commented May 21, 2020 at 10:32
• @goto1 you are right. Any suggestions? – Harsha M V Commented May 21, 2020 at 12:42
• @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 Commented May 22, 2020 at 13:33

 |  Show 2 more comments

2 Answers 2

Sorted by: Reset to default 18 +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>
  );
};

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

本文标签： javascriptSubdomain Routing in React and React RouterStack Overflow