如何用 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} />

如何用 React js 实现管理模板？

How to implement an admin template with react js?

admin

firebase

reactjs

react-admin