React在哪里放置一个带有侧边菜单的单页应用程序的登录页面

Posted 2021-04-06

我有一个带有侧面菜单的反应式网络应用程序。每当用户单击侧面菜单中的链接时，它们将被路由到在侧面菜单右侧呈现的页面。我的问题是，我如何登录这样一个用例，看到我路由到侧面菜单右侧的任何页面。我希望登录页面全屏，而不显示侧面菜单。这就是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;

答案

我可以在干净的设计方面找到的最佳解决方案是在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;

然后，为您的HomePage执行以下操作

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;

我希望它有所帮助！

另一答案

这是我的解决方案，它不完全是一个解决方案，但它将为您提供有关如何实现此解决方案的基本知识。

我们的想法是将Login组件放在app.js中，并在用户登录时有条件地显示它。

您必须将处理函数传递给登录组件，通过该组件您将能够控制app.js状态。

登录成功后，您可以显示导航和侧面菜单组件。

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>
    );
  }
}

---

您还需要编写一个单独的路由器文件，其中包含主应用程序。这用于在导航到/时显示应用程序组件

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;