因此,我找到了适用于自己平台的仪表板设计。它在交换机内部的路由中声明。我使用相同的开关进行登录和注册。所以index.js看起来像这样:
<BrowserRouter>
<Switch>
{indexRoutes.map((prop, key) => {
return <Route exact to={prop.path} component={prop.component} key={key} />;
})}
</Switch>
</BrowserRouter>
其中indexRoutes是一个数组:
import Dashboard from "layouts/Dashboard/Dashboard.jsx";
import Login from "../layouts/Login/Login";
import Register from "../layouts/Register/Register";
var indexRoutes = [{ path: "/", name: "Home", component: Dashboard }, { path: "/login", name: "Login", component: Login }, { path: "/register", name: "Register", component: Register }];
在仪表板布局中,还有另一个开关代表每个仪表板页面:
import Dashboard from "views/Dashboard/Dashboard";
import UserProfile from "views/UserProfile/UserProfile";
import TableList from "views/TableList/TableList";
import Typography from "views/Typography/Typography";
import Icons from "views/Icons/Icons";
import Notifications from "views/Notifications/Notifications";
const dashboardRoutes = [
{
path: "/dashboard",
name: "Dashboard",
icon: "pe-7s-graph",
component: Dashboard
},
{
path: "/user",
name: "User Profile",
icon: "pe-7s-user",
component: UserProfile
},
{
path: "/table",
name: "Table List",
icon: "pe-7s-note2",
component: TableList
},
{
path: "/typography",
name: "Typography",
icon: "pe-7s-news-paper",
component: Typography
},
{ path: "/icons", name: "Icons", icon: "pe-7s-science", component: Icons },
{
path: "/notifications",
name: "Notifications",
icon: "pe-7s-bell",
component: Notifications
},
{ redirect: true, path: "/", to: "/dashboard", name: "Dashboard" }
];
export default dashboardRoutes;
在主仪表板布局中,如果我尚未登录,则使用firebase.onAuthStateChange
重定向到登录路径,而在登录和注册布局中则相反。但是,如果我登录并访问“ / login”路由,但我不断收到此警告:Warning: You tried to redirect to the same route you're currently on: "/login"
,同时出现白屏。有关如何解决此问题的任何提示?