如何在Reactjs中的登录重定向期间防止主导航板和仪表板导航栏重叠

如何解决如何在Reactjs中的登录重定向期间防止主导航板和仪表板导航栏重叠

我正在处理reactjs项目，并且“主页”具有与“仪表板页面”不同的导航栏。登录并重定向到仪表板时，我注意到仪表板导航栏与主页导航栏重叠。请给我帮助以解决挑战，因为我尝试过的所有努力都证明是失败的。预先感谢。

以下是我的代码：

App.js：

import React,{ Component } from "react";
import { Route,Redirect } from "react-router-dom";
import Layout from "./components/Layout";
import Home from "./components/Home";
import Login from "./components/Login";
import Alerts from "./components/dashboard/Alerts";
import Register from "./components/Register";
import DashboardLayout from "./components/dashboard/DashboardLayout";
import Dashboard from "./components/dashboard/Dashboard";
import ContactState from "./components/dashboard/contact/ContactState";
import AuthState from "./components/dashboard/common/auth/AuthState";
import AlertState from "./components/dashboard/common/alert/AlertState";

render() {
    const { user } = this.state;
    return (
      <div>
        <AuthState>
          <ContactState>
            <AlertState>
              <Layout>
                <Alerts />
                <Route exact path="/" component={Home} />
                <Route path="/login" component={Login} />
                <Route path="/signup" component={Register} />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
              </Layout>

              <DashboardLayout>
                  <Route exact path="/dashboard" component={Dashboard} />
                  <Route exact path="/babyForm" component={BabyForm} />
                  <Route exact path="/babies" component={Babies} />
                  <Route exact path="/guardianForm" component={GuardianForm} />
                  <Route path="/logout" component={logout} />
              </DashboardLayout>
            </AlertState>
          </ContactState>
        </AuthState>
      </div>
    );
  }

Register.jsx：

在我的Register.jsx中，以下是成功登录后重定向到仪表板的代码：

useEffect(() => {
    if (isAuthenticated) {
      props.history.push("/dashboard");
    }

    if (error === "User already exists") {
      setAlert(error,"danger");
      clearErrors();
    }
    // eslint-disable-next-line
  },[error,isAuthenticated,props.history]);