React应用编译无报错但显示空白页，请求排查问题

我是React新手，我的React应用编译成功且无任何报错，但页面仅显示空白，不清楚问题所在。以下是我的代码及文件夹结构，希望有人能指出问题：

index.js #

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'
import { BrowserRouter } from 'react-router-dom'
import App from './App';

ReactDOM.render((
    // <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    // </Provider>
  ), document.getElementById('root'))

App.js #

import { BrowserRouter as Router, Route, Link, NavLink } from "react-router-dom";
import Home from "./components/Home";
import NewBuilding from "./components/NewBuilding";
import React, { Component } from "react";
import Web3 from 'web3';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import "./App.css";
import { useEffect, useState } from 'react';

function App() {

    const [currentAccount, setCurrentAccount] = useState(null);
    const checkWalletIsConnected = async () => {
        const { ethereum } = window;

        if (!ethereum) {
            console.log("Make sure you have Metamask installed!");
            return;
        } else {
            console.log("Wallet exists! We're ready to go!")
        }

        const accounts = await ethereum.request({ method: 'eth_accounts' });

        if (accounts.length !== 0) {
            const account = accounts[0];
            console.log("Found an authorized account: ", account);
            setCurrentAccount(account);
        } else {
            console.log("No authorized account found");
        }
    }

    const connectWalletHandler = async () => {
        const { ethereum } = window;

        if (!ethereum) {
            alert("Please install Metamask!");
        }

        try {
            const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
            console.log("Found an account! Address: ", accounts[0]);
            setCurrentAccount(accounts[0]);
        } catch (err) {
            console.log(err)
        }
    }


    const connectWalletButton = () => {
        return (
            <button onClick={connectWalletHandler} className='cta-button connect-wallet-button'>
                Connect Wallet
            </button>
        )
    }

    useEffect(() => {
        checkWalletIsConnected();
    }, [])

    return (
        <div>
          <Router>
            <AppBar position="static" color="default" style={{ margin: 0 }}>
              <Toolbar>
               <Typography variant="h6" color="inherit">
                 <NavLink className="nav-link" to="/">Home</NavLink>
               </Typography>
               <NavLink className="nav-link" to="/new/">New</NavLink>
              </Toolbar>
           </AppBar>
    
            <Route path="/" exact component={Home} />
            <Route path="/new/" component={NewBuilding} />
          </Router>
        </div>
      )
}

export default App;

文件夹结构 #

Home.js #

import React, { useState, useEffect } from "react";
import { makeStyles } from '@material-ui/core/styles';
import Web3 from 'web3'


const useStyles = makeStyles(theme => ({
    button: {
      margin: theme.spacing(1),
    },
    input: {
      display: 'none',
    },
  }));

  const Home = () => {
    const classes = useStyles();
    const [ contract, setContract] = useState(null)
    const [ accounts, setAccounts ] = useState(null)
    const [ funds, setFunds ] = useState([])
    const web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'))
  
    useEffect(() => {
    }, []);
  
 
    return (
        <div><h2>Home</h2></div>

    )
  }

export default Home;

问题排查与修复建议 #

1. 删除重复的Router嵌套
   index.js已经用BrowserRouter包裹了App，但App.js里又嵌套了一层Router，这会导致路由上下文冲突，页面无法渲染组件。
   修复： 移除App.js中的<Router>标签，保留index.js中的BrowserRouter即可。修改后的App.js返回部分：

return (
    <div>
        <AppBar position="static" color="default" style={{ margin: 0 }}>
            <Toolbar>
                <Typography variant="h6" color="inherit">
                    <NavLink className="nav-link" to="/">Home</NavLink>
                </Typography>
                <NavLink className="nav-link" to="/new/">New</NavLink>
            </Toolbar>
        </AppBar>

        <Route path="/" exact component={Home} />
        <Route path="/new/" component={NewBuilding} />
    </div>
)

2. 确认NewBuilding组件存在
   检查components文件夹下是否有NewBuilding.js文件，且该文件正确导出了React组件。如果文件缺失，会导致组件无法加载，页面空白。暂时不需要的话，可以注释掉该路由。

3. 优化Web3初始化逻辑
   Home.js中直接在组件顶层初始化Web3，如果本地没有运行区块链节点（如Ganache），会抛出错误导致组件渲染失败。建议将初始化移到useEffect中并添加错误捕获：

useEffect(() => {
    try {
        const web3Instance = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
        console.log('Web3连接成功');
        // 后续可以将web3Instance存入state
    } catch (error) {
        console.error('Web3连接失败:', error);
    }
}, []);

4. 查看浏览器控制台错误
   编译成功不代表没有运行时错误，按F12打开浏览器控制台，查看Console标签页的报错信息，比如Metamask未安装时window.ethereum不存在的问题，这些错误可能导致组件渲染中断。

内容的提问来源于stack exchange，提问作者user1758952