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

React의 빈 페이지: 문제 해결 가이드

React로 작업할 때 빈 페이지를 만나면 당황스러울 수 있습니다. 이 문제는 React-router-dom에서 라우팅이 작동하는 방식에 대한 오해로 인해 자주 발생합니다. 구체적인 사례를 살펴보고 빈 페이지 문제를 해결하기 위한 자세한 솔루션을 제공해 보겠습니다.

문제 설명:

다음 React 애플리케이션을 고려하세요.

<code class="javascript">// App.js
function App() {
  return (
      <Router>
        <Routes>
          <Route path="/" component={Home} />
          <Route path="/wallet" component={Wallet} />
        </Routes>
      </Router>
  );
}</code>

<code class="javascript">// Wallet.js
export function Wallet() {
  return (
    <div>
      <h1>Wallet Page!</h1>
    </div>
  );
}</code>

<code class="javascript">// Home.js
export function Home() {
  return (
    <div>
      <h1>Home Page!</h1>
    </div>
  );
}</code>

http://localhost:3001/ 또는 http://localhost:3001/wallet으로 이동하면 페이지가 비어 있습니다.

해결책:

최근 버전의 React-router-dom에서는 Route의 컴포넌트 prop이 element prop으로 대체되었습니다. 요소 소품은 React 요소를 값으로 사용합니다. 즉, 구성 요소는 구성 요소에 대한 참조 대신 JSX 요소로 전달되어야 합니다.

문제를 해결하려면 App.js 파일을 다음과 같이 수정하세요.

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

이렇게 변경하면 이제 구성 요소(Home 및 Wallet)가 React 요소로 요소 prop에 전달되고 애플리케이션은 이제 예상 페이지를 렌더링해야 합니다.

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