切換路由時 React Router Kepps css

Question

我的代碼有問題，我正在使用 react-router-dom@6 並解決了一個問題，我制作了一個<Home /> <Login /> </Register />組件，我正在使用 react 路由器在它們之間切換但是由於某種原因，例如當我切換到<Login />時，背景保持不變，我在Home.css中定義並且僅在<Home />中導入但是當我嘗試在Login.css中再次定義背景時所有頁面上的默認設置這讓我困惑了很長時間，我想要一些關於我應該如何處理它的建議

應用程序.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.ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ 也一樣，只是改變了正文

Answer 1

發生的情況是，您基本上已經在 CSS 中定義了 3 個正文查詢，因為默認情況下，反應中的 css 適用於整個應用程序，不僅適用於組件，重要的是在哪里......變化只是根據首先加載的組件的順序你的路線。

為了實現你想要的，你可以在你的路線中使用useEffect來改變身體類

useEffect(() => {
 document.body.classList.add('register');
},[])

但它不清楚如何做到這一點，我建議考慮制作你自己的Layout組件，它包裝你的整個應用程序並根據你的 url 更改類名（你可以使用 react-router 中的useRouteMatch鈎子）

編輯：或者您可以通過在此處添加一些類來<div className='app'>樣式