기본 라우터는 항상 reactive 라우터에서 실행

기본 라우터는 항상 reactive 라우터에서 실행

나는 StrikeDash 템플릿을 사용하는 프로젝트를 하고 있어.여기서 나는 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을 업데이트할 때마다 스위치 케이스에 따라 구성 요소를 렌더링한 후 반환

실제 동작:URL을 업데이트할 때마다 구성 요소뿐만 아니라 기본 구성 요소도 렌더링한다.여기 스위치는 여러 부품을 렌더링하는 것 같은데, 왜 그런지 모르겠어.

나는 방금 그 문제를 옮김으로써 해결했다.Switch태그 내부Suspenseauth.js 파일에 태그하다.

문제는 페이지 순서에 있어야 한다. 루트 경로는 모든 페이지의 수집기로 작동하므로, 당신은 페이지를 추가하도록 해야 한다.exact라우터 경로에 대한 키워드.여기 다른 표기들 사이의 차이에 대한 참조가 있다.

<Route exact path="/" component={Login} />

참조URL: https://stackoverflow.com/questions/69162456/default-route-always-execute-in-react-router