Same content on every page

Question

how do I can have different content on different pages? I use app.js as a home, and contact for second page, but whatever change I made in App.js, the change will show on contact. How do I fix this?

Thanks everybody.

App.js:

import React from "react";
    import {
      BrowserRouter as Router,
      Navigate,
      Route,
      Routes,
      Link
    } from "react-router-dom";
    import './App.css';
    import NavigationBar from "./components/NavigationBar";
    import Hero from "./components/NavigationBar/Hero/Hero";
    import Contact from "./components/Contact"
    import ErrorPage from "./components/ErrorPage";
    import { authentication } from "./firebase";
    import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
    import SignUpForm from "./components/SignUpForm"
    
      const signInWithGoogle = ()=>{
        const provider = new GoogleAuthProvider();
        signInWithPopup(authentication, provider)
        .then((re)=>{
          console.log(re)
        })
        .catch((err)=>{
          console.log(err)
        })
      }
    const App = () => {
      return (
    <div className="App">
      <Hero />
   <Router>
    <NavigationBar />
     <Routes>
       <Route index path="/"/>
       <Route path="/contact" element={<Contact />} />
       <Route path="/signupform" element={<SignUpForm />} />
       {/* <Route path="*" element={<Navigate to="/App" replace />} /> */}
        {/* <Route path="*" element={ErrorPage}/> */}
     </Routes>
   </Router>
   <button onClick={signInWithGoogle}>
   </button>
   </div> 
  );
}

export default App;

Answer 1

You can use React Router to specify which content is displayed on which URL. The tutorial can be found here.

For example:

import { render } from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import App from "./App";
import Expenses from "./routes/expenses";
import Invoices from "./routes/invoices";

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="expenses" element={<Expenses />} />
      <Route path="invoices" element={<Invoices />} />
    </Routes>
  </BrowserRouter>,
  rootElement
);