javascript - React 在何处放置带有侧面菜单的单页应用程序的登录页面

Question

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

希望对您有所帮助!