javascript - 反应在哪里放置带有侧边菜单的单页应用程序的登录页面
问题描述
我有一个带有侧边菜单的反应网络应用程序。每当用户单击侧菜单中的链接时,他们都会被路由到在侧菜单右侧呈现的页面。我的问题是,我如何登录这样的用例,因为我路由到的任何页面都呈现在侧边菜单的右侧。我希望登录页面全屏显示而不显示侧面菜单。这就是 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;
然后,为您的主页执行以下操作
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;
我希望它有帮助!
推荐阅读
- c# - ViewData 未传递给 ASP.NET Core 2.1 中的布局
- vba - 从使用 VBA 的项目中返回过期的非摘要任务列表
- c# - 如何将 Years Quarters (4) 添加到我的参数中?
- vba - MS Access VBA AppActivate“发送传真”和 SendKeys
- javascript - 仅当文本输入为 0 时才禁用按钮
- javascript - 带有可拖动手柄的垂直拆分面板以调整面板的高度
- python - 你如何找到一个似乎没有在任何地方定义的 python 模块?
- wordpress - 单击wpml中的链接时如何保持当前语言
- android - Android - JSON 抛出异常
- google-bigquery - 在 Big Query 中使用通配符进行分组