默认路由始终在Reaction路由器中执行

Default route always execute in react router(默认路由始终在Reaction路由器中执行)

问题描述

我正在处理一个使用strikingDash模板的项目。在这里，我在从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)

App.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时，它都会根据切换大小写呈现组件并将其返回

实际行为：每当我更新URL时，它将呈现组件和默认组件。我认为Switch Here呈现了多个组件，但我不知道为什么。

推荐答案

我刚刚通过将Switch标记移动到auth.js文件中的Suspense标记解决了该问题。

这篇关于默认路由始终在Reaction路由器中执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！