我如何在不同的页面上有不同的英雄（背景）

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 文件中有一个英雄

<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>

这导致背景保持静止。你可以尝试给第二个英雄一个更高的 z-index 值，或者从 App.js 文件中取出英雄组件并在每个页面上单独管理一个英雄。

我的另一个想法是检查 "SignUpForm" class 并查看它是否有图像作为背景。

提示：尝试改进您提问的方式，以便我们更容易回答。

我如何在不同的页面上有不同的英雄（背景）

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

css

background

reactjs

hero