我的代碼有問題，我正在使用 react-router-dom@6 并解決了一個問題，我已經制作了一個<Home /> <Login /> </Register />組件，我正在使用 react 路由器在它們之間切換，但是由于某種原因，當我切換到<Login />后臺時保持與我在Home.css中定義的相同并且僅匯入但是當我嘗試在Login.css<Home />中再次定義背景時，它成為所有頁面上的默認設定，這讓我困惑了很長時間，我想要一些建議我應該如何處理
應用程式.js
import { Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./Components/Home";
import Login from "./Components/Login";
import Register from "./Components/Register";
function App() {
return (
<>
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Login" element={<Login />} />
<Route path="/Register" element={<Register />} />
</Routes>
</div>
</>
);
}
export default App;
主頁.js
import React from "react";
import Navbar from "./Navbar";
import "../Css/Home.css";
import Footer from "./Footer";
import { Link } from "react-router-dom";
function Home() {
return (
<>
<Navbar />
<main>
<h1>YelpCamp</h1>
<p>Welcome To YelpCamp</p>
<p>Jump In And Explore Our Campgrounds</p>
<Link to="/Campgrounds">
<button className="button">View Our Campgrounds</button>
</Link>
</main>
<Footer />
</>
);
}
export default Home;
主頁.css
（僅重要的 CSS ）
/*BODY*/
body {
background: url("../Images/Home\ Background.jpg");
background-size: cover;
background-position: center;
height: 90vh;
}
登錄.js
import React from "react";
import Footer from "./Footer";
import Navbar from "./Navbar";
import "../Css/Login.css";
function Login() {
return (
<>
<Navbar />
<main>Login Page</main>
<Footer />
</>
);
}
export default Login;
登錄.css
（僅重要的 CSS ）
/*BODY*/
body {
background: #000;
}
Register.js和Register.css也一樣，只是改變了正文
uj5u.com熱心網友回復：
發生的情況是，您基本上已經在 CSS 中定義了 3 個正文查詢，因為默認情況下，react 中的 css 適用于整個應用程式，而不僅適用于組件，importad 的位置......變化只是根據首先加載的組件的順序你的路線。
為了實作你想要的，你可以useEffect在你的路線中使用改變身體類
useEffect(() => {
document.body.classList.add('register');
},[])
但它不清楚如何做到這一點，我建議考慮制作你自己的Layout組件，它包裝你的整個應用程式并根據你的 url 更改 className（你可以使用useRouteMatchreact-router 中的鉤子）
編輯：或者您可以<div className='app'>通過在此處添加一些類來設定樣式
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414276.html
標籤：
上一篇：給出剩余父高度的影像填充底部