React Router Kepps css when switching Routes

I have a problem With my code i am using react-router-dom@6 and have countered a problem i have made a <Home /> <Login /> </Register /> Components and i am using react router to switch between them but for some reason when i switch for example from to <Login /> the background stays the same which i have defined in Home.css and only imported in <Home /> but when i try to define background again in Login.css that becomes the default on all pages this has confused me for a long time now and i would like some advice on i how i should deal with it

App.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;

Home.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;

Home.css

(Only the important CSS )

/*BODY*/

body {
    background: url("../Images/Home\ Background.jpg");
    background-size: cover;
    background-position: center;
    height: 90vh;
}

Login.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;

Login.css

(Only the important CSS )

/*BODY*/

body {
    background: #000;
}

And the Same for Register.js and Register.css only changing the body

what happens is that you have basically defined 3 body queries in CSS, because by default css in react applies on whole app, not only on component, where is importad... what changes is just order based on which component was loaded first according to your route.

To achieve what you want, you can change body classes using useEffect in your routes

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

but its not clear way how to do it and i suggest to consider make your own Layout component, which wraps your whole app and change className based on your url (you can use useRouteMatch hook from react-router)

edit: Or you can style <div className='app'> instead by adding some classes here

React Router Kepps css when switching Routes

Related

Recent Posts