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

빈 반응 오류 페이지에 대한 해결 방법: 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의 리디렉션은 사용자 정의 라우팅의 리디렉션과 약간 다릅니다. 최상위 하위 구성 요소

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

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

• 세 번째이자 가장 간단한 방법은 잘못된 방법을 사용하고 구성 요소의 문서에 따라 최상위 하위 구성 요소를 리디렉션하지 않는 것입니다.

이 시점에서

이 문제는 먼저 문제의 핵심을 분석한 후 문제가 발생한 구체적인 위치를 찾아 최종적으로 해결해야 합니다.

이것이 문제를 해결하는 올바른 방법입니다

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응 오류 페이지 공백을 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!