如何使用两个模板来管理React应用程序

Question

我正在创建一个电子商务网站，带有管理面板和用户面板的模板，两个模板是不同的。所以我的问题是如何在公共场合设置布局。例如，如果在 index.html 上设置两个链接，则管理面板和用户面板将发生冲突。那我还能做什么

我尝试在公共场合创建不同的布局，但它不起作用

Answer 1

您可以使用 React 管理多个模板。以下是详细信息。 假设您有用户面板和管理面板。您可以在单独的文件中定义路由。就像您将创建一个 components/routes 文件夹一样。在 UserRoutes.ts 和 AdminRoutes.ts

中

const routes = [
{ path: "/change-password", component: ChangePassword, type: "user" },
{ path: "/user-dashboard", component: UserDashboard, type: "user" },
{ path: "/admin-dashboard", component: Dashboard, type: "admin" },
{ path: "/setting", component: Setting, type: "admin" },
];

现在创建 ProtectedRoute.ts 文件并将以下代码粘贴到其中。

const ProtectedRoute: FC<ProtectedRouteProps> = ({component: Component,type,...rest
}) => {
const authUser = useSelector(selectAuthUser);
const redirectTo = type === "admin" ? "/admin-login" : "/login";
if (!isLoggedIn || authUser.type !== type) {
 return <Redirect to={redirectTo} />;
}
return <Component {...rest} />;
};
export default ProtectedRoute;

在您的 App.ts 文件中。

<Router>
    <Switch>
      <Route path="/admin-login" component={Login} />
      <Route path="/login" component={Login} />
      {routes.map((route) => {
        return (
          <ProtectedRoute
            key={route.path}
            path={route.path}
            component={route.component}
            type={route.type}
          />
        );
      })}
    </Switch>
  </Router>

这将实现您的基本路线和导航。现在您可以如下所示分离您的组件，您可以根据您的需要更改名称或结构。

- src
  - modules
    - admin-modules
      - AdminDasboard.tsx
    - user-modules
      - UserDashboard.tsx

我希望这对您的问题有所帮助。 谢谢你