為什麼我的 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的元件屬性已被替換為元素屬性。 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 元素傳遞給element 屬性，應用程式現在應該呈現預期的頁面。

以上是為什麼我的 React 應用程式顯示空白頁面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！