Why Does My React App Show a Blank Page?

Blank Page in React: A Troubleshooting Guide

When working with React, encountering a blank page can be frustrating. This issue often arises due to a misunderstanding of how routing works in React-router-dom. Let's dive into a specific case and provide a detailed solution to resolve the blank page issue.

Problem Statement:

Consider the following React application:

<code class="javascript">// App.js
function App() {
  return (
      <router>
        <routes>
          <route path="/" component="{Home}"></route>
          <route path="/wallet" component="{Wallet}"></route>
        </routes>
      </router>
  );
}</code>

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

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

When navigating to http://localhost:3001/ or http://localhost:3001/wallet, the page remains blank.

Solution:

In recent versions of react-router-dom, the component prop of Route has been replaced with the element prop. The element prop takes a React element as its value, which means that the components should be passed as JSX elements instead of references to components.

To resolve the issue, modify the App.js file as follows:

<code class="javascript">// App.js
function App() {
  return (
      <router>
        <routes>
          <route path="/" element="{<Home"></route>} />
          <route path="/wallet" element="{<Wallet"></route>} />
        </routes>
      </router>
  );
}</code>

By making this change, the components (Home and Wallet) are now passed as React elements to the element prop, and the application should now render the expected pages.

The above is the detailed content of Why Does My React App Show a Blank Page?. For more information, please follow other related articles on the PHP Chinese website!