React app display blank page without any compilation error

Question

I am not sure what went wrong with my react app below, it compile successfully without error but doesn't show anything (just show a blank page). Can anyone point out what went wrong with my code? Sorry I am new to 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;

My Home.js is residing in a components folder

The folder structure is as below

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;

Answer 1

Your Route component should have the prop element instead of component , see the migration guide .

<Route path="/" exact element={<Home />} />

In App.js you're wrapping your components again in a Router . Instead you should wrap your Route components in a Routes .

import { Routes, Route, Link, NavLink } from "react-router-dom";

...

<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>

  <Routes>
    <Route path="/" exact element={<Home />} />
    <Route path="/new/" element={<NewBuilding />} />
  </Routes>
</div>