如何使用react js实现管理模板？

Question

我正在使用reactjs构建在线课程平台。我正在使用Firebase作为存储，数据库，身份验证和托管。我想使用react-admin-firebase创建一个管理页面。我的问题是我应该为管理面板创建一个单独的应用程序，在哪里托管它，还是应该将其包含在原始应用程序的文件夹结构中，如果这样，我应该如何组织原始应用程序的文件夹结构。这是我的第一个网站，因此对此的任何信息将不胜感激！

谢谢

Answer 1

在Reactjs中，您创建可重用的UI组件。仅作为建议，将相关组件保留在其目录中，即可安排所需的方式。您可以在项目中的任何位置使用import语句导入组件并使用这些组件。 对于ADMIN面板，只需指定一个PROTECTED路由，在身份验证和授权后，管理员用户可以访问与管理员相关的页面。

Answer 2

只需使答案更清楚...

您可能有子文件夹来保存所有与管理员相关的页面和组件：

├── components
    ├── global
    │   └── Navbar.tsx
    │   └── Footer.tsx
    ├── main
    │    ...
    │   └── Home.tsx
    │   └── About.tsx
    │   └── Login.tsx
    │   └── Register.tsx
    │    ...
    ├── admin
    │   └── Dashboard.tsx
    │   └── Manage.tsx
    │    ...
    │   └── Settings.tsx

并且在您的组件中，定义了ProtectedRoute组件

...
export default const ProtectedRoute = ({ path: Path, component: Component, ...rest }) => (
  <Route
    path={Path}
    render={props =>
    //Custom login check to be implemented by you
      logggedIn ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

那么，无论您在何处定义路线，我都假定App.tsx

<Route exact path="/" render={props => <Main {...props} />} />
<ProtectedRoute path="/admin" component={admin} />

Answer 3

如果您将Node.js用作后端并拥有所有API，则可以使用AdminBro，它非常容易实现和使用。