대응 16: 경고: 일치하는 서버 HTML이 있어야 합니다.에
React 16으로 업그레이드한 후 다음 오류 메시지가 나타납니다.
warning.js:33 Warning: Expected server HTML to contain a matching <div> in <body>.
이 에러 메시지의 일반적인 원인은 무엇이며, 수정 방법은 무엇입니까?
사용하시는 경우ReactDOM.hydrate웹 응용 프로그램을 시작하려면 이 경고가 표시됩니다.
애플리케이션이 서버측 렌더링을 사용하지 않는 경우(ssr)를 사용해 주세요.ReactDOM.render시작하도록 하겠습니다.
NextJS와 같은 서버 사이드 렌더링을 사용하는 경우 최근 코드를 삭제하고 DOM이 보장되지 않는 구성요소 범위 내에서 직접 변수에 액세스하려고 시도했는지 비교합니다.저에겐 다음과 같았습니다.
import { i18n } from 'i18n'
export default function SomeComponent() {
const initLanguage = i18n.language <---- causing error
return ...
}
이러한 속성에 액세스 할 필요가 있는 경우는, 에서 액세스 해 주세요.document이미 확립되어 있습니다.이것은 다음과 같습니다.
import { i18n } from 'i18n'
import { useEffect, useState } from 'react'
export default function SomeComponent() {
const [initlanguage, setInitLanguage] = useState('en')
useEffect(() => setInitLanguage(i18n.language), [])
return ...
}
HTML 코드가 다음과 같은 경우
<table>
<tr>
이 에러가 발생할 수 있습니다.
이 문제를 회피하려면 다음과 같은 <tbody> 태그를 사용합니다.
<table>
<tbody>
<tr>
태그 닫는 거 잊지 마!
이는 Browsersync가 서버 측에는 존재하지 않는 스크립트태그를 클라이언트 측 본문에 삽입하기 때문으로 보입니다.따라서 React는 서버 렌더에 연결할 수 없습니다.
머티리얼 UI를 사용해서 이걸 얻었는데const searchParams = new URLSearchParams(process.browser ? window.location.search : '')내 NextJS 앱의 리액트 컴포넌트 상단에서 material-ui Spanechbar를 사용하여 오류를 제거할 수 있었습니다.useEffect갈고리를 채우다
참조할 전체 구성 요소:
export default function SnackBarMessage() {
const [requestLogin, setRequestLogin] = useState(false)
const handleClose = (event, reason) => {
if (reason === 'clickaway') {
return
}
setRequestLogin(false)
}
useEffect(() => {
// had to move into a useEffect hook
const searchParams = new URLSearchParams(process.browser ? window.location.search : '')
const hasRequestLogin = Boolean(searchParams.get('requestLogin'))
if (hasRequestLogin) {
setRequestLogin(true)
}
}, [])
return (
<>
{requestLogin && (
<Snackbar open={requestLogin} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} severity='error' style={{ fontSize: '18px' }} elevation={6}>
Please Log Back In
</Alert>
</Snackbar>
)}
</>
)
}
저 같은 경우에는요.PersistGate그리고.react-loadable이 라이브러리를 사용하는 경우 preloadReady 대신 preloadAll을 사용할 수 있습니다.
이 경우 RECTFUL을 설치했는데 기본적으로는 다음과 같이 렌더링이 다릅니다.
src/renderers/dom.dom.displays
ReactDOM.hydrate(
<App initialData={window.__R_DATA.initialData} />,
document.getElementById('root'),
);
src/renderers/server.displays
const initialData = {
appName: 'Reactful',
};
return Promise.resolve({
initialData,
initialMarkup: ReactDOMServer.renderToString(
<App initialData={initialData} />,
),
pageData,
});
initialData로 관리!
dom.js를 이렇게 수정했습니다.initial Data에 주의하는 것이 중요합니다.
const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate;
const initialData = {
appName: 'Reactful',
};
renderMethod(
<App initialData={initialData} />,
document.getElementById('root'),
);
이 문제는 HMR 업데이트 중 클라이언트와 서버가 일치하지 않기 때문에 발생할 수 있습니다.
나는 그렇게 결심했다:
const renderMethod = !!render.hot ?ReactDOM.render : ReactDOM.hydrate
const renderMethod = !!module.hot ? ReactDOM.render : ReactDOM.hydrate
renderMethod(
<AppContainer>
<Comp />
</AppContainer>,
document.getElementById('root')
)
내 경우 Next.js 13으로 업그레이드 할 때 오류가 발생했는데 특히 를 사용할 때Drawer부터@mui/material서버측 컴포넌트로의 전환이 쉽지 않은 것 같습니다.
return (
<Drawer
anchor="left"
onClose={onClose}
open={open}
PaperProps={{
sx: {
backgroundColor: 'neutral.900',
color: '#FFFFFF',
width: 280
}
}}
sx={{zIndex: (theme) => theme.zIndex.appBar + 100}}
// 'persistent' or 'permanent' throws error
variant="temporary"
>
{content}
</Drawer>
);
준비되기 전에 돔에 있는 소품에 접근하려는 것 같군요다음과 같은 구조를 사용할 수 있습니다.
{(variable) && sameVariable}
SSR를 사용하시겠죠?경고는 창 개체가 존재하기 전에 렌더하려고 시도하는 것입니다.수분을 공급해야 해요.
ReactDOM.hydrate(<App />, document.getElementById("home"))
앱 컴포넌트가 express에 의해 정적으로 처리되는 것을 이해할 수 없습니다.서비스되기 전에 렌더링하려고 하는 이유는 무엇입니까?댓글 달아요.
언급URL : https://stackoverflow.com/questions/46443652/react-16-warning-expected-server-html-to-contain-a-matching-div-in-body
'programing' 카테고리의 다른 글
| AJAX를 사용하여 PHP 파일에서 응답 가져오기 (0) | 2023.03.05 |
|---|---|
| MongoDB에서 컬렉션 이름을 변경하려면 어떻게 해야 합니까? (0) | 2023.03.05 |
| 첫 번째 선택 옵션을 항상 공백으로 설정하는 방법 (0) | 2023.03.05 |
| Angular.js 인터셉터를 사용한HTTP 401 캡처 (0) | 2023.03.05 |
| babel을 사용한 후 IE에서 '심볼'이 정의되지 않음 (0) | 2023.03.05 |