UPDATE: Source code is added. Problem seems to be with the additional page component I made. Problems are with the code in Home, Product Description, Tweets, and ColdEmails. I do not know how to add source code added.

This is how the code in the page "Home" looks like:

import React from 'react' import { Component } from 'react'

class Home extends Component { render() { return (

This is the Home Page

) } } export default Home

The issue seems to be in the import of Home - Cold emails and or between the function from Home to cold emails. As once I remove everything except the navigation import and navigation function the nav bar that I have created is shown. Thanks in advance!

import './App.css';

//Import all the components at the top
import Navigation from './components/Navigation'
import Home from './components/Home'
import ProductDescription from './components/ProductDescription'
import Tweets from './components/Tweets'
import ColdEmails from './components/ColdEmails'

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="App">
      <Navigation/> 
      <Home/>
      <ProductDescription/>
      <Tweets/>
      <ColdEmails/>
      </div>
    </Router>
  );
}
export default App;

I'm trying to display the nav bar ui and pages after including additional imports of the other pages.

CodePudding user response：

Most likely its one of your imported components. Usually a white screen means TypeError. Like a value is being called that doesn't fit the type it wants to render.

For example: Calling an object, but trying to render it as a string.