반응 오류 페이지 공백을 해결하는 방법-프런트엔드 Q&A-php.cn

반응 오류 페이지 공백을 해결하는 방법

藏色散人

풀어 주다： 2023-01-04 16:45:42

원래의

1732명이 탐색했습니다.

빈 반응 오류 페이지에 대한 해결 방법: 1. 루트 경로를 스위치 라벨의 아래쪽으로 이동합니다. 2. 상위 구성 요소에 정확한 키워드가 포함되어 있는지 확인하고, 키워드가 포함되어 있으면 제거합니다. 구성 요소의 문서는 최상위 하위 구성 요소로 리디렉션됩니다.

반응 오류 페이지 공백을 해결하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

빈 반응 오류 페이지 문제를 해결하는 방법은 무엇입니까?

React 페이지 공백 문제

머리말

때때로 React-Router 모듈을 사용하여 경로를 전환할 때 페이지가 공백이 되는 경우가 있습니다. 이번에는 상황을 명확하게 설명하고 해결해 보겠습니다.

Problems

아래에서는 문제가 있는 코드를 직접 업로드합니다:

<Switch>
    <Route path={"/"} component={loadable(() => import("./App.jsx"))} />
    <Route path={"/home"} component={loadable(() => import("./views/Home/Home.jsx"))} />
    <Route path={"/login"} component={loadable(() => import("./views/Login/Login.jsx"))} />
</Switch>

로그인 후 복사

이 코드는 우리가 자주 사용하는 코드 중 하나입니다. 사실 이런 코드의 빈 페이지 문제를 해결하는 방법은 매우 간단합니다. 경로 태그에 직접 정확한 필드를 추가하고 강제 일치 규칙을 사용하여 라우팅을 페이지 구성 요소와 일치시킵니다. 그러나 정확한 항목을 사용하면 보조 페이지가 일치하지 않습니다.

react-router의 일치 규칙은 Switch 라벨에서 위에서 아래로 일치하기 때문에 경로가 홈 경로로 점프해야 하는 경우 먼저 현재 경로의 루트 경로와 일치할 수 있습니다. 보조 라우팅이지만 루트 경로에는 바인딩된 페이지가 없으므로 비어 있습니다.

Solution

이 문제는 쉽게 해결할 수 있습니다.

<Switch>
    <Route path={"/home"} component={loadable(() => import("./views/Home/Home"))} />
    <Route path={"/login"} component={loadable(() => import("./views/Login/Login"))} />
  <Route exact path={"/"} component={loadable(() => import("./App.jsx"))} />
</Switch>

로그인 후 복사

위 코드를 보고 루트 경로를 Switch 라벨 하단으로 이동하세요.

Switch 레이블의 일치 규칙으로 인해 루트 경로는 다른 보조 경로가 일치할 수 없는 경우에만 일치되며, 루트 경로가 강제로 일치될 수 있도록 정확한 강제 일치 필드가 루트 경로에 추가됩니다. 이 경로에는 보조 경로도 있으며 정확한 필드를 제거할 수 있습니다.

react-router-config를 사용하세요

react-router-config와 같은 React 라우팅 관리 모듈 패키지를 사용할 때 흰색 화면 현상이 발생하기 매우 쉽습니다. 이는 React Router 및 타사에 대한 익숙하지 않기 때문입니다. 낯설음으로 인한 모듈 패키지.

const routes = [
  {
    path: "/",
    component: Home,
    routes: [
      {
        path: "/",
        render: () => <Redirect to="/user" />
      },
      {
        path: "/user",
        component: User,
        exact: true
      },
      {
        path: "/content",
        component: Content,
        exact: true
      }
    ]
  },
  {
    path: "/login",
    component: Login,
    exact: true
  }
]

로그인 후 복사

현재 페이지가 공백이 될 수 있는 요인은 많습니다. 가장 특징적인 세 가지에 대해서만 이야기하겠습니다.

리디렉션 시 공백

react-router-config의 리디렉션은 사용자 정의 라우팅의 리디렉션과 약간 다릅니다. 최상위 하위 구성 요소

페이지 렌더링 시 비어 있습니다.

위와 같은 이유로 현재 페이지가 비어 있습니다. 구성 요소의 상위 구성 요소에 정확한 키워드가 포함되어 있는지 확인하세요. 이때 여전히 비어 있으면 제거하세요. 문제를 해결할 수 없는 경우 경로와 구성 요소가 성공적으로 일치하는지 확인하세요(서브 경로에 정확한 키워드가 추가되었는지, 경로가 올바르게 중첩되었는지, 모든 경로가 올바르게 작성되었는지, 구성 요소가 올바르게 내보내졌는지 등). ).