Javascript React和React路由器中的子域路由

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

Admin>Admin.example.com

主持人>主持人.example.com

Brands>Brands.example.com

我的React应用程序结构

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

---

这是在React中处理基于子域的路由的正确方法吗？我从未对多个用户类型使用过一个代码库。对正确的实现感到困惑。

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

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

{isAdmin&&
}
{isModerator&&
}
...

例如，AdminView可能是这样的：

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

export const admin视图=（）=>{
返回(
);
};

我想你的服务器应该能够实现这一点。例如，你可以为管理员和版主创建子域，而用户域将是基本路由，因此如果管理员要登录，他将转到

admin.yourapp.com

，版主转到

版主.yourapp.com

，然后处理身份验证逻辑，如果您使用react router，视图将不会真正成为问题，那么

您使用的路由器是什么？。你应该看看React路由器，@Joshua我也在用同样的。但是在子域上没有找到任何帮助。这听起来好像不是由

client/react router

处理的，而是由服务SPA的服务器处理的。假设所有三个子域都提供相同的

React

codebase，我建议您从上面发布的代码中找出子域是什么，并有条件地呈现不同的组件，即如果是

admin

show render only

admin

-特定的路由/链接/导航等…@goto1您是对的。有什么建议吗？@HarshaMV我曾经实现过你想要实现的东西，但是我再也不能访问代码库来给你举一些例子了。创建一个全局路由器，即BaseRouter，然后管理员、版主等应该拥有自己的路由器。更像是带有子路由器的路由器。然后，您可以向每个路由添加身份验证。如何让用户登录？由于所有三个登录都不同？您可以为每个角色添加/登录路径，每个角色指向不同的登录组件。然后admin.example.com/sign-in将指向与慢化剂.example.com/sign-in不同的组件。这样，您仍然可以透明地使用用户角色的相同逻辑。例如，如果未通过身份验证，只需推送至/登录即可

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