reactjs中的嵌套路由器-刷新时显示空白页

我是reactjs和react路由器的初学者，我的嵌套路由器有一些问题。
对于我在app.js中的主路由器，一切正常。因此，我可以访问我的登录页（/）、登录页（/login）和注册页（/register）。一旦我到达这个页面，如果我在chrome浏览器上手动刷新（ctrl r），页面就会相应地刷新和呈现。
下面是我的app.js

import React from "react";
import { Router, Switch } from "react-router-dom";
import Login from "./components/Login";
import Register from "./components/Register";
import Dashboard from "./components/Dashboard";
import DynamicLayout from './router/DynamicLayout';
import LandingPage from './components/homepage/LandingPage';

import { history } from "./helpers/history";

const App = () => {
    return (
      <Router history={history}>
        <div className="App">        
          <Switch>
            <DynamicLayout 
                exact 
                path="/"
                component={LandingPage}
                layout="LANDING_NAV"
            />
            <DynamicLayout 
                exact 
                path="/login"
                component={Login}
                layout="LOGIN_PAGE"
            />
            <DynamicLayout 
                exact 
                path="/register"
                component={Register}
                layout="REGISTER_PAGE"
            />
            <DynamicLayout 
                path="/dashboard"   
                component={Dashboard}
                layout="DASHBOARD_PAGE" 
            />
          </Switch>        
        </div>
    </Router>    
    );
};

export default App;

下面是我的dynamicclayout.js

import React from "react";
import { BrowserRouter as Route, Switch } from "react-router-dom";
import Login from "../components/Login";
import Register from "../components/Register";

const DynamicLayout = (props) => {
  const { component: RoutedComponent, layout, ...rest } = props;

  const actualRouteComponent = <RoutedComponent {...props} />;

  switch (layout) {
    case "LANDING_NAV": {
      return <div>{actualRouteComponent}</div>;
    }

    case "LOGIN_PAGE": {
      return <div>{actualRouteComponent}</div>;
    }

    case "REGISTER_PAGE": {
      return <div>{actualRouteComponent}</div>;
    }

    case "DASHBOARD_PAGE": {
      return <div>{actualRouteComponent}</div>;
    }

    default: {
      return (
        <div>
          <h2>Default Nav</h2>
          {actualRouteComponent}
        </div>
      );
    }
  }
};

export default DynamicLayout;

问题在于 Jmeter 板组件中的嵌套路由器。基本上，一旦管理员用户登录，他们就会显示在管理员 Jmeter 板上。
下面是我的 Jmeter 板组件。

import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { history } from "../helpers/history";
import { useHistory } from 'react-router-dom';
import {
  BrowserRouter as Router,
  Route,
  Switch,
} from "react-router-dom";
import { logout } from "../actions/auth";

import AdminSideNavBar from "../components/admin/AdminSideNavBar";
import AdminManageUsers from "./admin/AdminManageUsers";
import AdminPendingApprovalUsers from "../components/admin/AdminPendingApprovalUsers";
import AdminDeactivatedUsers from "./admin/AdminDeactivatedUsers";
import AdminRegisterInternalUsers from "./admin/AdminRegisterInternalUsers";
import AdminLogs from "../components/admin/AdminLogs";

import BrokerSideNavBar from "../components/broker/BrokerSideNavBar";

import ShareholderSideNavBar from "../components/shareholder/ShareholderSideNavBar";

import Login from "../components/Login"
import AdminActivatedUsers from "./admin/AdminActivatedUsers";

const Dashboard = () => {
  const [showAdminDashboard, setShowAdminDashboard] = useState(false);
  const [showBrokerDashboard, setShowBrokerDashboard] = useState(false);
  const [showShareholderDashboard, setShowShareholderDashboard] =
    useState(false);

  const { user: currentUser } = useSelector((state) => state.auth);
  const dispatch = useDispatch();

  useEffect(() => {
    if (currentUser) {
      setShowAdminDashboard(currentUser.roles.includes("ROLE_ADMIN"));
      setShowBrokerDashboard(currentUser.roles.includes("ROLE_BROKER"));
      setShowShareholderDashboard(
        currentUser.roles.includes("ROLE_SHAREHOLDER")
      );
    }
  }, [currentUser]);

  const logOut = () => {
    dispatch(logout());
  };

  let history = useHistory();

  return (
    <div>
      {showAdminDashboard && (
        <Router history= {history}>
          <div className="wrapper">
            <AdminSideNavBar />
            <Switch>
              <Route exact path="/dashboard" component={AdminPendingApprovalUsers} />
              <Route exact path="/logs" component={AdminLogs} />
              <Route exact path="/manageusers" component={AdminManageUsers} />
              <Route exact path="/activeusers" component={AdminActivatedUsers} />
              <Route exact path="/deactivatedusers" component={AdminDeactivatedUsers} />
              <Route exact path="/registerinternalusers" component={AdminRegisterInternalUsers} />
            </Switch>
          </div>
        </Router>
      )}

      {showBrokerDashboard && <BrokerSideNavBar />}
      {showShareholderDashboard && <ShareholderSideNavBar />}
    </div>
  );
};

export default Dashboard;

通过我的侧导航栏（adminsidenavbar组件），我可以导航到各个页面。比如/logs、/manageusers、/activeusers等。
下面是我的adminsidenavbar组件

import React from "react";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { logout } from "../../actions/auth";

import {
  CDBSidebar,
  CDBSidebarContent,
  CDBSidebarFooter,
  CDBSidebarHeader,
  CDBSidebarMenu,
  CDBSidebarMenuItem,
} from "cdbreact";
import { NavLink } from "react-router-dom";

const AdminSideNavBar = () => {
  const { user: currentUser } = useSelector((state) => state.auth);
  const dispatch = useDispatch();
  const { isLoggedIn } = useSelector((state) => state.auth);

  const logOut = () => {
    dispatch(logout());
  };

  return (
    <div className="stickysidenav">
      <CDBSidebar textColor="#fff" backgroundColor="#333">
        <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
          <a
            href="/"
            className="text-decoration-none"
            style={{ color: "inherit" }}
          >
            TradeDuh
          </a>
          <p>{currentUser.username}</p>

          {/* {isLoggedIn && (
            <div className="wrapper">
              <p>{currentUser.username}</p>
            </div>
          )} */}
        </CDBSidebarHeader>

        <CDBSidebarContent className="sidebar-content">
          <CDBSidebarMenu>
            <NavLink exact to="/dashboard" activeClassName="activeClicked">
              <CDBSidebarMenuItem icon="columns">Dashboard</CDBSidebarMenuItem>
            </NavLink>
            <NavLink exact to="/logs" activeClassName="activeClicked">
              <CDBSidebarMenuItem icon="table">Logs</CDBSidebarMenuItem>
            </NavLink>
            <NavLink exact to="/uploadcompany" activeClassName="activeClicked">
              <CDBSidebarMenuItem icon="edit">Update Nasdaq Stocks</CDBSidebarMenuItem>
            </NavLink>
            <NavLink exact to="/manageusers" activeClassName="activeClicked">
              <CDBSidebarMenuItem icon="users-cog">Manage Users</CDBSidebarMenuItem>
            </NavLink>
            <NavLink exact to="/activeusers" activeClassName="activeClicked">
              <CDBSidebarMenuItem icon="user-check">Active Users</CDBSidebarMenuItem>
            </NavLink>
            <NavLink exact to="/deactivatedusers" activeClassName="activeClicked">
              <CDBSidebarMenuItem icon="user-times">De-activated Users</CDBSidebarMenuItem>
            </NavLink>
            <NavLink to="/registerinternalusers" activeClassName="activeClicked">
              <CDBSidebarMenuItem icon="user-plus">
                Add Internal Users
              </CDBSidebarMenuItem>
            </NavLink>
            <NavLink
              exact
              to="/login"
              activeClassName="activeClicked"
              onClick={logOut}
            >
              <CDBSidebarMenuItem icon="sign-out-alt">
                Log Out
              </CDBSidebarMenuItem>
            </NavLink>
          </CDBSidebarMenu>
        </CDBSidebarContent>

        <CDBSidebarFooter style={{ textAlign: "center" }}>
          <div
            style={{
              padding: "20px 5px",
            }}
          >
            TradeDuh (FDM - S21-Java-02)
          </div>
        </CDBSidebarFooter>
      </CDBSidebar>
    </div>
  );
};

export default AdminSideNavBar;

问题是，一旦我到达各个页面，如果我进行手动刷新（ctrl-r），我的整个屏幕将变为白色/空白。
假设我单击/logs，adminlogs组件被呈现，这一切都很好。但是如果我现在按ctrl r进行手动刷新，adminlogs组件将不再显示。我只看到一个空白的白色屏幕。
这与我的主路由器完全不同，在主路由器中，我可以手动刷新页面，页面将相应地呈现。
有没有办法解决这个问题？我的问题是什么？
谢谢你的帮助！

reactjs中的嵌套路由器-刷新时显示空白页

暂无答案！

相关问题

热门标签

最新问答