Successful compile with yarn start but then only App.css components/blank page appear

Question

I'm working on a simple digital banking app. I used this original repo: https://github.com/mishraankit-1497/DigitalBanking

I had to install some additional dependencies such react-scripts, react-router-dom, react-dom, axios, and react-bootstrap. As well as create a src and public folder with index.html file.

I've gotten it to compile successfully but when i run yarn start, the App.css file components with the gradient background appears but nothing else. I've troubleshot by changing the "homepage" in package.json to the url, to "/" to ".", none of that works. I've changed the home url to "/" in Home.js. That also did not work.

App.js

import React from 'react';
// import logo from './logo.svg';
import './App.css';
import { BrowserRouter, Routes,Route } from "react-router-dom";
import Home from './pages/Home';
import OpenAccount from './pages/OpenAccount';
import CashDeposit from './pages/CashDeposit';
import CashWithdrawal from './pages/CashWithdrawal';
import CheckBalance from './pages/CheckBalance';

function App() {
  return (
    <div className="App">
      <header className="App-header">        
        
        <BrowserRouter>
          <Routes>
            <Route path="/OpenAccount" component={OpenAccount} ></Route>
            <Route path="/CashDeposit" component={CashDeposit} ></Route>
            <Route path="/CashWithdrawal" component={CashWithdrawal} ></Route>
            <Route path="/CheckBalance" component={CheckBalance} ></Route>
            <Route path="/" component={Home} ></Route>
          </Routes>
        </BrowserRouter>
          
      </header>
        
    </div>
  );
}

export default App;

App.css

.App {
  text-align: left;
  
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background: #c04848; 
  background: -webkit-linear-gradient(to right, #c04848, #480048); 
  background: linear-gradient(to right, #c04848, #480048);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  /* align-items: center; */
  /* justify-content: center; */

  font-size: 15px;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Home.js

import React, { Component } from 'react';
import {NavLink} from 'react-router-dom';

class Home extends Component {
   

    render() {
        return (

        <div>
             <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                 <a className="navbar-brand" href="/"><i class="fas fa-university"></i></a> 

                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
        <div >
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <NavLink to="/" class="nav-link">Home <span class="sr-only">(current)</span></NavLink>
                </li>
                
                <li class="nav-item">
                    <NavLink class="nav-link" to="/OpenAccount" >OpenAccount</NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link" to="/CashDeposit">CashDeposit</NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link" to="/CashWithdrawal">CashWithdraw</NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link" to="/CheckBalance">CheckBalance</NavLink>
                </li>
            </ul>
                </div>

                            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"></link>
                            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css"></link>
                            
                            <div id='root'></div>
                
            </div>
  
        </nav>
            <div className="container text-center ">
                <h1 class="display-3">Digital Banking</h1>
            </div>

    </div>

        );
    }
}

export default Home;

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

index.js

import React from 'react';
import * as ReactDOM from 'react-dom';
import './index.css';

import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

I tried to attach a screenshot but it's too large. It just a gradient background from the App.css file. Nothing else.

How do I get this app to properly load so that the app functions with navigation between pages?

Answer 1

It seems you have react-router-dom@6 installed. The route components render the routed content on the element prop. The component, and render and children function props were all replaced by a single element prop taking a ReactNode.

Route

declare function Route(
  props: RouteProps
): React.ReactElement | null;

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactNode | null;
  index?: boolean;
  path?: string;
}

Fix the routes to use the element prop and pass the routed components as JSX.

<BrowserRouter>
  <Routes>
    <Route path="/OpenAccount" element={<OpenAccount />} />
    <Route path="/CashDeposit" element={<CashDeposit />} />
    <Route path="/CashWithdrawal" element={<CashWithdrawal />} />
    <Route path="/CheckBalance" element={<CheckBalance />} />
    <Route path="/" element={<Home />} />
  </Routes>
</BrowserRouter>

Answer 2

[Solution] thanks all. The issue was that I had react router@6 installed. I uninstalled and installed react [email protected] and removed relevant elements from package.json and it works.