-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
[커뮤니티 페이지 생성하기 강의부분] authRoute 논리연산자를 추가하면 error가 뜹니다.
23.02.24 16:25 작성 23.02.24 16:33 수정 조회수 304
0
_app.tsx
export default function App({ Component, pageProps }: AppProps) {
axios.defaults.baseURL = process.env.NEXT_PUBLIC_SERVER_BASE_URL + '/api';
axios.defaults.withCredentials = true;
const { pathname } = useRouter();
const authRoutes = ['/register', '/login'];
const authRoute = authRoutes.includes(pathname);
return (
<AuthProvider>
{!authRoute && <NavBar />}
<div className={authRoute ? '' : 'pt-12'}>
<Component {...pageProps} />
</div>
</AuthProvider>
);
}
해당 부분에서 !authRoute 논리연산자를 추가하면
Error: Hydration failed because the initial UI does not match what was rendered on the server.
에러가 나옵니다.
강사님 파일을 클론 해서 빌드 확인해보니 이런 에러가 안나오길래, 이 강의까지의 나머지 파일도 클론한 것과 모두 같은 것을 확인했는데 왜 저만 이런 에러가 나오는걸까요?
해당 에러를 구글링해서 해결책으로 나오는 것들을 적용해봤는데 어느것도 에러를 해결해주지 못했습니다ㅠ
어떤 부분을 확인해보면 좋을까요?
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
커뮤니티 페이지 생성하기(Navagation Bar)
강의실 바로가기
답변을 작성해보세요.
0
sjlee
질문자2023.02.27
NavBar.tsx 의
const {loading, authenticated} = useAuthState();
const {authenticated, loading} = useAuthState();
으로 순서를 바꿔적은걸 고치니 해결할 수 있었습니다.
그러고 다시 또 위에 코드처럼 순서를 바꿔봤더니 그 에러가 안나오네요...
해결은 했지만... 원인이 뭔지도 모르겠고...ㅠ 찝찝하네요ㅜㅜ..
답변 1