Реагировать Где разместить страницу входа для одностраничного приложения с боковым меню

Question

У меня есть веб-приложение реагирования с дополнительным меню.Каждый раз, когда пользователь нажимает на ссылку в боковом меню, они направляются на страницу, отображаемую в правой части бокового меню.Мой вопрос заключается в том, как мне войти в систему для такого варианта использования, поскольку любая страница, на которую я направляюсь, отображается справа от бокового меню.Я хочу, чтобы страница входа была в полноэкранном режиме без отображения бокового меню.Вот как выглядит App.js.

import React, { Component } from "react";
import { HashRouter } from "react-router-dom";
import Navigation from "./pages/General/components/Navigation";
import SideMenu from "./pages/General/components/SideMenu";
import "../src/css/App.css";

class App extends Component {
  render() {
    return (
      <div>
        <HashRouter>
          <div className="main-wrapper">
            <SideMenu />
            <Navigation />
          </div>
        </HashRouter>
      </div>
    );
  }
}

export default App;

Вот Navigation.js

import React from "react";
import { Route } from "react-router-dom";

import CalendarPage from "../../Calendar/CalendarPage";
import DoctorsList from "../../Doctors/DoctorsList";
import PatientsList from "../../Patients/PatientsList";
import AdminUsersList from "../../AdminUsers/AdminUsersList";
import SpecialitiesList from "../../Specialities/SpecialitiesList";

const Navigation = () => {
  return (
    <div className="mainarea">
      <Route exact path="/" component={CalendarPage} />
      <Route exact path="/scheduler" component={CalendarPage} />
      <Route exact path="/doctors" component={DoctorsList} />
      <Route exact path="/patients" component={PatientsList} />
      <Route exact path="/admin-users" component={AdminUsersList} />
      <Route exact path="/specialities" component={SpecialitiesList} />
    </div>
  );
};

export default Navigation;

Answer 1

Лучшее решение, которое я могу найти с точки зрения чистого дизайна, - это внедрить другой маршрутизатор в ваш App.jsx, потому что вы реализуете маршрутизацию внутри вашего компонента, и вам нужен еще один для вашей страницы входа в систему.

Тогда ваш App.jsx может выглядеть следующим образом:

import React, { Component } from "react";
import { Redirect, Route, Switch } from "react-router-dom";
import LogIn from "./pages/General/components/Login";
import HomePage from "./pages/General/components/HomePage";
import "../src/css/App.css";

class App extends Component {
  render() {
    return (
      <div>
        <Switch>
            <Route path={'/login'} component={LogIn} />
            <Route path={'/'} component={HomePage} />
            <Redirect to="/" />
        </Switch>
      </div>
    );
  }
}

export default App;

Тогда для вашей домашней страницы сделайте следующее

import React, { Component } from "react";
import { HashRouter } from "react-router-dom";
import Navigation from "./pages/General/components/Navigation";
import SideMenu from "./pages/General/components/SideMenu";
import "../src/css/App.css";

class HomePage extends Component {
  render() {
    return (
      <div>
        <HashRouter>
          <div className="main-wrapper">
            <SideMenu />
            <Navigation />
          </div>
        </HashRouter>
      </div>
    );
  }
}

export default HomePage;

Надеюсь, это поможет!

Answer 2

Вот мое решение, оно не совсем решение, но оно даст вам основную идею о том, как это реализовать.

Идея состоит в том, чтобы поместить компонент Login в app.js и условно отобразить его, если пользователь вошел в систему.

Вам нужно будет передать функцию обработчика компоненту входа в систему, с помощью которого вы сможете контролировать состояние app.js .

Когда вход будет успешным, вы можете показать компонент Навигация и Sidemenu.

import { Fragment } from "react";
import Login from "path/to/login";
class App extends Component {
  state = { isLoggedIn: false };

  loginHandler = () => {
    this.setState({
      isLoggedIn: true
    });
  };
  render() {
    return (
      <div>
          <div className="main-wrapper">
            {isLoggedIn ? (
              <Fragment>
                <SideMenu />
                <Navigation />
              </Fragment>
            ) : (
              <Login loginHandler={this.loginHandler} />
            )}
          </div>
      </div>
    );
  }
}

---

Также вам нужно написать отдельный файл роутера, который будет содержать основное приложение.Используется для отображения компонента app при переходе к /

import React from 'react';
import { HashRouter, Route } from 'react-router-dom';
import App from './app';

const MainRoute = () => (
    <HashRouter>
        <Route path="/" component={App} />
    </HashRouter>
);
export default MainRoute;