javascript - 默认路由总是在 react 路由器中执行

Question

我正在做一个项目，我正在使用引人注目的Dash 模板。在这里，我在从 URL 更改路由时遇到了一些路由问题。
auth.js

import React, { lazy, Suspense } from "react"
import { Spin } from "antd"
import { Switch, Route, Redirect } from "react-router-dom"
import AuthLayout from "../container/profile/authentication/Index"

const Login = lazy(() =>
  import("../container/profile/authentication/overview/SignIn")
)
const SignUp = lazy(() =>
  import("../container/profile/authentication/overview/SignUp")
)
const ForgetPassword = lazy(() =>
  import("../container/profile/authentication/overview/ForgetPassword")
)
const EmailConfirmation = lazy(() =>
  import("../container/profile/authentication/overview/EmailConfirmation")
)
const VerificationPage = lazy(() =>
  import("../container/profile/authentication/overview/VerificationPage")
)

const NotFound = () => {
  console.log("NOT FOUND")
  return <Redirect to="/" />
}

const FrontendRoutes = () => {
  return (
    <Switch>
      <Suspense
        fallback={
          <div className="spin">
            <Spin />
          </div>
        }
      >
        <Route exact path="/verification" component={VerificationPage} />
        <Route exact path="/email-confirmation" component={EmailConfirmation} />
        <Route exact path="/forgetPassword" component={ForgetPassword} />
        <Route exact path="/signup" component={SignUp} />
        <Route exact path="/" component={Login} />
        <Route component={NotFound} />
      </Suspense>
    </Switch>
  )
}

export default AuthLayout(FrontendRoutes)

应用程序.js

import React, { useEffect, useState } from "react";
import { hot } from "react-hot-loader/root";
import { Provider, useSelector } from "react-redux";
import { ThemeProvider } from "styled-components";
import { BrowserRouter as Router, Redirect, Route } from "react-router-dom";
import { ConfigProvider } from "antd";
import store from "./redux/store";
import Admin from "./routes/admin";
import Auth from "./routes/auth";
import "./static/css/style.css";
import config from "./config/config";
import ProtectedRoute from "./components/utilities/protectedRoute";

const { theme } = config;

const ProviderConfig = () => {
  const { rtl, isLoggedIn, topMenu, darkMode } = useSelector(state => {
    return {
      darkMode: state.ChangeLayoutMode.data,
      rtl: state.ChangeLayoutMode.rtlData,
      topMenu: state.ChangeLayoutMode.topMenu,
      isLoggedIn: state.Authentication.login,
    };
  });

  const [path, setPath] = useState(window.location.pathname);

  useEffect(() => {
    let unmounted = false;
    if (!unmounted) {
      setPath(window.location.pathname);
    }
    // eslint-disable-next-line no-return-assign
    return () => (unmounted = true);
  }, [setPath]);

  return (
    <ConfigProvider direction={rtl ? "rtl" : "ltr"}>
      <ThemeProvider theme={{ ...theme, rtl, topMenu, darkMode }}>
        <Router basename={process.env.PUBLIC_URL}>
          {!isLoggedIn ? <>{console.log("INSIDE PUBLIC")}<Route path="/" component={Auth} /></> : <ProtectedRoute path="/admin" component={Admin} />}
          {isLoggedIn && (path === process.env.PUBLIC_URL || path === `${process.env.PUBLIC_URL}/`) && (
            <Redirect to="/admin" />
          )}
        </Router>
      </ThemeProvider>
    </ConfigProvider>
  );
};

function App() {
  return (
    <Provider store={store}>
      <ProviderConfig />
    </Provider>
  );
}

export default hot(App);

每当我将 URL 更改为另一条路由时，如前面在前端路由中所述。然后它将始终打印如下控制台语句:

INSIDE PUBLIC
NOT FOUND
INSIDE PUBLIC
NOT FOUND

预期行为:每当我更新 URL 时，它都会根据 switch case 渲染组件并将其返回
实际行为:每当我更新 URL 时，它都会呈现组件以及默认组件。我认为这里的 Switch 渲染了多个组件，但我不知道为什么。

Answer 1

我刚刚通过移动 Switch 解决了这个问题Suspense 内的标签auth.js 文件中的标记。