반응 흰색 화면이 나타나는 이유는 무엇입니까?

반응 시 흰색 화면이 나타나는 이유는 HtmlWebpackPlugin 플러그인이 Bundle.js를 도입할 때 해결 방법은 다음과 같습니다. 1. 출력 구성에 publicPath를 추가합니다. 2. 기록 모드에서 HistoryApiFallback을 설정합니다. 사실이다.

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

리액션에서 흰색 화면이 나타나는 이유는 무엇인가요?

리액트 히스토리 모드에서 흰색 화면 문제

최근 리액트를 다시 사용할 때 보기 흉한 해시를 사용하고 싶지 않아서 라우팅 모드를 히스토리로 전환했는데 새로고침이 되는 등의 문제가 발생했습니다. 화면이 흰색이고 이미지를 로드할 수 없습니다. 여기서는 해결 방법에 대해 설명합니다.

Cause

우선 이런 일련의 현상이 일어나는 이유에 대해 이야기해 봅시다.

http://localhost:xxxx/ 경로에서 페이지를 새로 고치면 문제가 없습니다. 모든 것이 정상적으로 보이지만 하위 모듈로 변경하면 새로 고침 화면이 흰색으로 표시됩니다. 왜일까요?

현재 경로에서 Bundle.js를 찾는다는 것을 알 수 있습니다. 이유는 무엇입니까? HtmlWebpackPlugin 플러그인이 Bundle.js를 도입하는 데 도움이 될 때 상대 경로

를 도입하므로 새로 고칠 때 현재 URL을 기준으로 검색됩니다.

Solution

이유가 명확하면 솔루션이 준비된 것입니다. 현재 URL을 따르는 대신 새로 고칠 때 Bundle.js의 로딩 경로가 루트 디렉터리에서 시작되도록 하는 방법을 찾으면 됩니다.

1. 출력 구성에 publicPath를 추가하세요

output: {
    filename: 'assets/js/bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/"
}

publicPath는 무엇을 의미하나요? 공식 웹사이트에도 이런 문장이 있습니다

webpack-dev-server는 기본적으로 publicPath를 기본으로 사용하며, 이를 사용하여 서비스가 webpack에서 출력된 파일에 액세스할 수 있는 디렉터리를 결정합니다.

간단히 이해하면 정적 리소스는 다음 경로에서 로드됩니다.

publicPath: "/" //Loading path '/assets/js/bundle.js'

이런 방식으로 모든 새로 고침은 루트 디렉터리에서 로드되기 시작합니다. , 우리의 Bundle.js는 손실되지 않습니다. 이미지를 로드할 수 없는 경우에도 동일한 문제가 발생합니다.

2. webpack-dev-server의 HistoryApiFallback

히스토리 모드에서 devServer는historyApiFallback을 true로 설정해야 합니다

devServer: {
historyApiFallback: true
}

위 두 가지 사항에 주의해야 히스토리 모드를 정상적으로 사용할 수 있습니다. 다른 이유가 있다면 자유롭게 추가해주세요.

ps: 프로젝트가 서버에 배포된 후 페이지 화면이 흰색으로 바뀌고 백그라운드에서 관련 설정을 해야 하는데 여기서는 다루지 않습니다.

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

위 내용은 반응 흰색 화면이 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!