Как сделать так, чтобы на разных страницах был разный герой (фон)?

Question

У меня разные CSS для каждой страницы. Я уже пробовал некоторые туториалы, но этот Герой не хочет исчезать. Как убрать этого героя?

Использование React v. 18.0 и зависимости...

Спасибо.

Код в 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, здесь я хочу другого Героя:

       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 практически не содержит текста className="Hero2а также h1.

Answer 1

Я не могу быть уверен, но кажется, что у вас есть герой в файле App.js

из-за чего фон остается неподвижным. Вы можете попробовать повысить уровень второго Героя. значение или взять компонент Hero из файла App.js и управлять героем отдельно на каждой странице.

Другая идея, которая у меня была, - проверить class и посмотреть, есть ли у него изображение в качестве фона.

Совет: постарайтесь улучшить способ задавать вопросы, чтобы нам было легче отвечать.