pages and header are not displayed in the app.js-CodePudding

I can't see my Pages or Header in Localhost:3000

Here you can see the App.ja

import React from "react";
import { signInWithGoogle } from "./services/fireBase";
import Header from "./pages/layout/Header";
import Message from "./pages/Message
const App = () => {

  return (
    <div className="App">
    <h1>LernApp</h1>
    <button onClick={signInWithGoogle}>Sign In with Google</button>
    <h1>{localStorage.getItem("name")}</h1>  
    <Header />
    <Message />
    </div>  
  );

};
export default App;

it is a empty page enter image description here

CodePudding user response：

try this. This is called React Fragments to wrap multiple HTML elements.

return (
<> 
<div className="App">
<h1>LernApp</h1>
<button onClick={signInWithGoogle}>Sign In with Google</button>
<h1>{localStorage.getItem("name")}</h1>  
<Header />
<Message />
</div>  
</>
  );

CodePudding user response：

check 1: While Importing Pages or Header check proper folder Structure . check 2: try using fragmentation for multiple renders. let us know it is help full or not.

  return (
<> 
<div className="App">
<h1>LernApp</h1>
<button onClick={signInWithGoogle}>Sign In with Google</button>
<h1>{localStorage.getItem("name")}</h1>  
<Header />
<Message />
</div>  
</>
  );