How do I have different Hero (background) on different pages

Question

I have different CSS for every page. I already tried some tutorials, but that one Hero does not want to disappear. How do I remove that one Hero?

Using React v. 18.0 And dependencies...

Thank you.

Code in 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">
   <Router>
    <NavigationBar />
    <Hero />
     <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;`App;

SignUpForm code, here I want a different Hero:

 import React from "react";
import Hero2 from "../../Hero2/Hero2";


const SignUpForm = () => {
    return(
        <div className="SignUpForm">
            <Hero2/>
            <p>hi</p>
        </div>
    )
};

export default SignUpForm;

Hero2.js has little of text practically className="Hero2and h1.

Answer 1

I can't be really sure, but it seems that you have a Hero in the App.js file

<Router>
    <NavigationBar />
    <Hero />
    <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>

which is causing the background to remain still. You could try giving the second Hero a higher z-index value, or taking the Hero component from the App.js file and managing a Hero separately on each page.

The other idea that i had is to check the "SignUpForm" class and see if it has an image as background.

Tip: Try to improve the way you ask questions so it is easier for us to answer.