Как реализовать шаблон администратора с реагировать js?

Question

Я создаю платформу онлайн-курса, используя reactjs. Я использую Firebase в качестве хранилища, базы данных, аутентификации и хостинга. Я хочу создать страницу администратора с использованием response-admin-firebase. Мой вопрос заключается в том, должен ли я создать отдельное приложение для панели администратора и где его разместить, или мне следует включить его в структуру папок исходного приложения, если да, то как мне организовать структуру папок моего исходного приложения. Это мой первый сайт, поэтому любая информация об этом будет очень признательна!

Спасибо

Answer 1

В Reactjs вы создаете повторно используемые компоненты пользовательского интерфейса. Держите ваши связанные компоненты в их каталоге, просто предложение, вы можете организовать, как вы хотите. В любом месте вашего проекта вы импортируете компоненты, используя оператор импорта, и используете эти компоненты. Для панели ADMIN просто укажите ЗАЩИЩЕННЫЙ маршрут, после аутентификации и авторизации администратор может получить доступ к страницам, связанным с администратором .

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} />