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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
答案

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

以上是关于React在哪里放置一个带有侧边菜单的单页应用程序的登录页面的主要内容,如果未能解决你的问题,请参考以下文章

基于react-router的单页应用

使用 Express 的单页应用程序 React 路由 URL。但不要使用 create-react-app 或 Heroku 之类的部署服务

App Engine + Polymer.dart 带有 hashbang 的单页 Web 应用路由

带有 HTML5 应用缓存的单页应用的 Nginx 配置

带有 socket.io 的单页应用程序中的特定于部分的侦听器

React 原生响应式侧边菜单