작성
·
62
0
맨 처음 리액트 코드스플리팅 에서 막히는데요,,,ㅠㅠ
강의 내용이랑 똑같이 했는데 막히는데 한번봐주실수있으실까요??
그리고 코드를 작성하고 리액트화면을 그냥 새로고침하면 코드가적용이되는게 맞죠? 제가하면 지금 mainPage div만 나오고 나머지는 나오지않아서요
import { Suspense, lazy } from "react";
import { createBrowserRouter } from "react-router-dom"; // require 대신 import로 수정
const Loading = <div>Loading...</div>;
const Main = lazy(() => import("../pages/mainPage")); // lazy 게으르다 -> 코드 스플리팅
const About = lazy(() => import("../pages/about")); // lazy 게으르다 -> 코드 스플리팅
const root = createBrowserRouter([
{
path: '',
element: <Suspense fallback={Loading}><Main /></Suspense>
},
{
path: 'about',
element: <Suspense fallback={Loading}><About /></Suspense>
}
]);
export default root;
import React from 'react'
import { Link } from 'react-router-dom'
const mainPage = () => {
return (
<div className = 'text-3xl'>
<div className={'flex'}>
<Link to ={'/about'}>About</Link>
</div>
<div>mainPage</div>
</div>
)
}
export default mainPage
import React from 'react'
import { Link } from 'react-router-dom'
const about = () => {
return (
<div className={'text-3xl'}>
<div className={'flex'}>
<Link to ={'/about'}>About</Link>
</div>
<div>About page</div>
</div>
)
}
export default about
import React from 'react'
import { RouterProvider } from 'react-router-dom'
import root from './router/root'
const App = () => {
return (
<RouterProvider router={root} />
)
}
export default App
답변 3
0
0
설정에 문제가 없다면 '/about' 경로를 호출했을 때 AboutPage 컴포넌트가 보여져야 합니다.
해결이 안되시면
프로젝트에서 node_modules 폴더를 삭제한 후에 프로젝트를 올려주시면 살펴볼 수 있습니다.
https://drive.google.com/drive/folders/1ZLHRKaXx8Ou8kZNd1WE6qALxq_wJODXW
0
안녕하세요, 인프런 AI 인턴입니다.
김우철님, 리액트의 코드 스플리팅과 관련하여 질문 주신 내용을 확인하였습니다. 리액트에서 코드 스플리팅을 이용하여 페이지를 동적으로 로드할 때, 새로고침 후 화면에 원하시는 페이지가 제대로 나타나지 않는 문제를 경험하고 계신 것 같습니다.
현재 작성해주신 코드의 구조를 보면, createBrowserRouter
를 통해 라우터를 설정하고, Suspense
를 통해 로딩 화면을 구현하려는 점이 잘 보입니다. 다만 특정 조건하에서 코드가 예상대로 작동하지 않을 수 있는데, 여기에 몇 가지 점검 사항과 해결 방법을 말씀드리겠습니다.
파일 및 경로 확인: import
경로와 파일명이 정확히 일치하는지 확인해 주세요. JavaScript에서 파일명은 대소문자를 구분하기 때문에, mainPage
와 about
컴포넌트 파일명이 정확히 맞는지 확인해주세요.
컴포넌트 이름 대소문자: 리액트 컴포넌트는 대문자 시작이 관례입니다. mainPage
와 about
컴포넌트의 선언부에서 첫 글자를 대문자로 수정해보세요.
리액트 초기 설정: create-react-app
등으로 프로젝트를 생성했다면, 이는 기본적으로 서비스 워커 등을 설정하기 때문에 HTTP에서 lazy load 시에 문제가 발생할 수 있습니다. 개발 서버를 잘 운영 중인지 확인해 주세요.
라우터 설치 여부 확인: react-router-dom
패키지가 제대로 설치되어 있어야 하며, 버전 호환성 문제도 종종 있을 수 있는 점 체크해 주세요.
// mainPage.js와 about.js 파일에서 컴포넌트 이름을 대문자로 시작
const MainPage = () => {
return (
<div className='text-3xl'>
<div className={'flex'}>
<Link to={'/about'}>About</Link>
</div>
<div>mainPage</div>
</div>
);
};
export default MainPage;
const About = () => {
return (
<div className={'text-3xl'}>
<div className={'flex'}>
<Link to={'/'}>Home</Link>
</div>
<div>About page</div>
</div>
);
};
export default About;
아래 유사한 질문에 대한 기존 답변을 참고하시기 바랍니다:
- React에서 코드 스플리팅 이슈 해결 방법: 코드 스플리팅 및 라우팅 문제를 다룬 유사 질문입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해 드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.