내 React 앱에 빈 페이지가 표시되는 이유는 무엇입니까?

React의 빈 페이지: 실수 발견

React 개발을 시작할 때 빈 페이지가 나타나는 답답한 문제에 직면할 수 있습니다. 해당 애플리케이션으로 이동합니다. 이 렌더링 문제의 근본 원인을 식별하려면 코드를 철저히 조사해야 합니다.

이 경우 제공된 React 애플리케이션은 페이지 간 라우팅을 위해 "react-router-dom" 패키지를 사용합니다. App.js의 Route 구성 요소를 조사하면 이전 버전 라이브러리의 오래된 구문을 활용한다는 것을 알 수 있습니다.

react-router-dom@6에서는 라우팅된 콘텐츠의 렌더링이 다음을 사용하는 방식에서 전환되었습니다. "구성요소" 소품을 "요소" 소품으로 변경합니다. 이 수정으로 인해 구성 요소를 구성 요소로 참조하는 대신 "element" prop 내에서 JSX로 전달해야 합니다.

문제를 해결하려면 다음 구문을 통합하도록 App.js 파일을 수정하세요.

import {BrowserRouter as Router,Routes,Route,} from "react-router-dom";
import { Home } from './components/Home';
import { Wallet } from './components/Wallet';

function App() {
  return (
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/wallet" element={<Wallet />} />
        </Routes>
      </Router>
  );
}

이 조정을 수행하면 구성 요소가 JSX 구조 내에서 올바르게 렌더링되어 홈 및 지갑 페이지가 적절하게 표시됩니다.

위 내용은 내 React 앱에 빈 페이지가 표시되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!