Javascript 使用react路由器dom私有路由延迟加载

问题：

我在那里创建了一个react应用程序，我使用react路由器dom的私有路由，并使用延迟加载。这是我的index.js文件

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { PrivateRoute } from "./components/PrivateRoute/PrivateRoute";
import SignIn from "./components/SignIn/SignIn";
import AdminLayout from "./components/Admin/AdminLayout/AdminLayout";
import OfficerLayout from "./components/Officer/OfficerLayout/OfficerLayout";
import * as serviceWorker from "./serviceWorker";
import { Provider } from "react-redux";
import { createLogicMiddleware } from "redux-logic";
import { createStore, applyMiddleware, compose } from "redux";
import { Route, Switch, BrowserRouter } from "react-router-dom";
import "primereact/resources/themes/nova-light/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
import reducers from "./reducers";
import services from "./services";
const logicMiddleware = createLogicMiddleware(services, {});
const middleware = applyMiddleware(logicMiddleware);
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancer = composeEnhancers(middleware);
let store = createStore(reducers, enhancer);
// let store = applyMiddleware(promiseMiddeleware)(createStore);
ReactDOM.render(
  // <Provider
  //   store={store(
  //     reducers,
  //     window.__REDUX_DEVTOOLS_EXTENSION__ &&
  //       window.__REDUX_DEVTOOLS_EXTENSION__()
  //   )}
  // >
  <Provider store={store}>
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={SignIn} />
        <Route path="/signin" component={SignIn} />
        <PrivateRoute
          exact
          path="/admin"
          name="Admin"
          component={AdminLayout}
        ></PrivateRoute>
        <PrivateRoute
          exact
          path="/officer"
          name="Officer"
          component={OfficerLayout}
        ></PrivateRoute>
      </Switch>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

---

私有路由工作正常，这意味着当用户未登录到系统时，它会重定向到登录页面。但是像

/officer/findDriver

这样的路由无法正确重定向。有人能帮我解决这个问题吗？谢谢你

嗨。就连我也面临着同样的问题。你解决问题了吗？嗨。就连我也面临着同样的问题。你解决问题了吗？

import React, { Component } from "react";
import { Redirect, Route } from "react-router-dom";

export const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      localStorage.getItem("jwt") ? (
        <Component {...props}></Component>
      ) : (
        <Redirect
          to={{
            pathname: "/",
            state: { from: props.location }
          }}
        ></Redirect>
      )
    }
  ></Route>
);

import React, { Component, Suspense } from "react";
import { Redirect, Route, Switch } from "react-router-dom";
import routes from "../officer_routes";
import "./OfficerLayout.css";
import { Container, Card, Row, Col } from "reactstrap";

const OfficerHeader = React.lazy(() =>
  import("../OfficerHeader/OfficerHeader")
);

class OfficerLayout extends Component {
  loading = () => (
    <div className="animated fadeIn pt-1 text-center">Loading...</div>
  );

  componentDidMount() {
    document.body.classList.add("officer-layout-background");
  }

  componentWillUnmount() {
    document.body.classList.replace("background-color", "no-color");
  }

  render() {
    return (
      <div>
        <Container fluid>
          <div className="app-panel">
            <div className="police-app-header">
              <Suspense fallback={this.loading()}>
                <OfficerHeader />
              </Suspense>
            </div>
            <Row>
              <Col lg="1" />
              <Col lg="10">
                <Card className="police-app-panel-card">
                  {" "}
                  <Suspense fallback={this.loading()}>
                    <Switch>
                      {routes.map((route, idx) => {
                        return route.component ? (
                          <Route
                            key={idx}
                            path={route.path}
                            exact={route.exact}
                            name={route.name}
                            render={props => <route.component {...props} />}
                          />
                        ) : null;
                      })}
                      <Redirect from="/officer" to="/officer/doFine" />
                    </Switch>
                  </Suspense>{" "}
                </Card>
              </Col>
              <Col lg="1" />
            </Row>
          </div>
        </Container>
        {/* <footer className="police-app-footer">iiii</footer> */}
      </div>
    );
  }
}

export default OfficerLayout;

const OfficerPanel = React.lazy(() => import("./OfficerPanel/OfficerPanel"));
const EnforcedFines = React.lazy(() => import("./EnforcedFines/EnforcedFines"));
const DriverList = React.lazy(() => import("./DriverList/DriverList"));
const FineSearchSingle = React.lazy(() =>
  import("./FineSearchSingle/FineSearchSingle")
);

const DriverDetails = React.lazy(() => import("./DriverDetails/DriverDetails"))
const Profile = React.lazy(()=> import("./Profile/Profile"))
const ChangePassword = React.lazy(() => import("./Profile/ChangePassword/Changepassword"))

const routes = [
  { path: "/officer/findDriver", name: "findDriver", component: DriverList },
  {
    path: "/officer/singleFine/:id",
    name: "SingleFine",
    component: FineSearchSingle
  },
  {
    path: "/officer/driverDetails/:id",
    name: "Driver Details",
    component: DriverDetails
  },
  {
    path: "/officer/profile",
    name: "Profile",
    component: Profile
  },
  {
    path: "/officer/changePassword",
    name: "Change Password",
    component: ChangePassword
  }
];

export default routes;