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中文網其他相關文章！
