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

Question

我是 ReactJS 和 React Router 的初学者，我的嵌套路由器遇到了一些问题。

对于我在 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;

下面是我的 DynamicLayout.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;

问题出在我的仪表板组件中的嵌套路由器上。基本上，一旦管理员用户登录，他们就会看到管理员仪表板。

下面是我的仪表板组件。

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 组件将不再显示。我看到的只是一个空白的白屏。

这与在我的主路由器中发生的情况完全不同，在主路由器中我可以刷新手册页并且页面会相应地呈现。

知道如何解决这个问题吗？我的问题是什么？

感谢您的帮助！