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

Question

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

登录成功后，您可以显示Navigation和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>
    );
  }
}

---

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

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;