reactjsreact-router

While I try to Add my About Us page link in NAVBAR and then add that in the app.jsx the home page gets mixed with it and somehow it is a bit messy

When I attempt to add my "About Us" page link to the Navbar and include it in app.jsx, the home page ends up getting mixed up and becomes a bit messy. Specifically, when I don't add the Navbar links, everything works perfectly fine. However, when I try to include, for example, the "About Us" link within the Home section of the Navbar, I encounter an issue where the styles for the About page overlap with those of the Home page.

NAVBAR Image please Refer this Image for your reference

Home Page Image Look at this Image This is the site which I want when I add the aboutUs page in the navbar

but when I add or route the about us page in the App.jsx my homepage get's distorted like this

Distorted Home Page Image This is how the iamge looks like When I add the AboutUs in the Route

Here is the code for both

Navbar.jsx

import React, { useEffect, useState } from 'react';
import './Navbar.css'; // Import the CSS file
import gsap from 'gsap'; // Make sure gsap is installed and imported
import { Link, useLocation } from 'react-router-dom';

const Navbar = () => {
  const location = useLocation();
  const [menu, setMenu] = useState(location.pathname);

  useEffect(() => {
    const nav = document.querySelector('nav');

    const handleMouseEnter = () => {
      let tl = gsap.timeline();
      
      tl.to("#nav-bottom", {
        height: "21vh",
        duration: 0.5
      })
      .to(".nav-part2 h5", {
        display: "block",
        duration: 0.1
      })
      .to(".nav-part2 h5 span", {
        y: 0,
        stagger: {
          amount: 0.5
        }
      });
    };

    const handleMouseLeave = () => {
      let tl = gsap.timeline();
      
      tl.to(".nav-part2 h5 span", {
        y: 25,
        stagger: {
          amount: 0.2
        }
      })
      .to(".nav-part2 h5", {
        display: "none",
        duration: 0.1
      })
      .to("#nav-bottom", {
        height: 0,
        duration: 0.2
      });
    };

    nav.addEventListener('mouseenter', handleMouseEnter);
    nav.addEventListener('mouseleave', handleMouseLeave);

    return () => {
      nav.removeEventListener('mouseenter', handleMouseEnter);
      nav.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, []);

  useEffect(() => {
    setMenu(location.pathname);
  }, [location]);

  return (
    <nav>
      <h1><span className="color3">CRAVE</span>Cart.</h1>
      <div className="nav-part2">
        <div className="nav-elem">
          <h4>Our Story</h4>
          <h5><span>Our Story</span></h5>
        </div>
        <div className="nav-elem">
          <h4><Link to="/" className={menu === '/' ? 'active' : ''} onClick={() => setMenu('/')}>Home</Link></h4>
          <h5><span><Link to="/about" className={menu === '/about' ? 'active' : ''} onClick={() => setMenu('/about')}>About Us</Link></span></h5>
          <h5><span>How It Works</span></h5>
          <h5><span>Blog</span></h5>
        </div>
        <div className="nav-elem">
          <h4>Mess</h4>
          <h5><span>Daily Specials</span></h5>
          <h5><span>Weekly Menu</span></h5>
          <h5><span>Meal Plans</span></h5>
          <h5><span>Student Discounts</span></h5>
        </div>
        <div className="nav-elem">
          <h4>Track Order</h4>
          <h5><span>Order Status</span></h5>
          <h5><span>Delivery Timeline</span></h5>
          <h5><span>Recent Orders</span></h5>
          <h5><span>Track with Map</span></h5>
        </div>
        <div className="nav-elem">
          <h4>Contact Us</h4>
          <h5><span>Customer Service</span></h5>
          <h5><span>Feedback</span></h5>
          <h5><span>FAQs</span></h5>
        </div>
        <div className="nav-elem">
          <h4>About Agency</h4>
          <h5><span>Our Team</span></h5>
        </div>
      </div>
        
      <button>
        Login
        <svg fill="none" viewBox="0 0 20 20">
          <path fill="#fff" d="M2.5 14.375V17.5h3.125l9.217-9.217-3.125-3.125L2.5 14.375Zm14.758-8.508a.83.83 0 0 0 0-1.175l-1.95-1.95a.83.83 0 0 0-1.175 0l-1.525 1.525 3.125 3.125 1.525-1.525Z"></path>
        </svg>
      </button>
      <div id="nav-bottom"></div>
    </nav>
  );
};

export default Navbar;

App.jsx

import React from 'react';
import Navbar from './components/Navbar/Navbar';
import Home from './pages/Home/Home';
import { Routes, Route } from 'react-router-dom';


function App() {
  return (
    <div className="App">
      <Navbar />
      <Routes>
        <Route path='/home' element={<Home />} />
        <Route path='/' element={<Home />} /> {/* Optional: Route for the home page */}
        
      </Routes>
    </div>
  );
}

export default App;

when I add the Route option for my About Us page It gets overlapped on the Home page

AboutUs.jsx Code

import React, { useEffect } from 'react';
import LocomotiveScroll from 'locomotive-scroll'; // Import Locomotive Scroll
import gsap from 'gsap'; // Import GSAP
import './AboutUs.css'; // Make sure your CSS file path is correct

const AboutUs = () => {
  useEffect(() => {
    // Initialize Locomotive Scroll
    const scroll = new LocomotiveScroll({
      el: document.querySelector('#main'),
      smooth: true,
    });

    // GSAP Animation Timeline
    const tl = gsap.timeline();

    tl.to('#page1', {
      y: '100vh',
      scale: 0.6,
      duration: 0,
    })
      .to('#page1', {
        y: '30vh',
        duration: 1,
        delay: 1,
      })
      .to('#page1', {
        y: '0vh',
        rotate: 360,
        scale: 1,
        duration: 0.7,
      });

    // Clean up Locomotive Scroll on component unmount
    return () => {
      scroll.destroy();
    };
  }, []);

  useEffect(() => {
    // Scrolling text animation for page5
    const container = document.getElementById('page5');
    const scrollingText = container.querySelector('.scrolling-text');
    const containerWidth = container.offsetWidth;
    const textWidth = scrollingText.scrollWidth;

    const animate = () => {
      let startPos = containerWidth;

      const step = () => {
        startPos -= 1; // Adjust the value to control the speed
        if (startPos <= -textWidth) {
          startPos = containerWidth;
        }
        scrollingText.style.transform = `translateX(${startPos}px)`;
        requestAnimationFrame(step);
      };
      step();
    };

    animate();
  }, []);

  return (
    <div id="main">
      <div id="page1">
        <div id="nav">
          <h5>CarveCart</h5>
          <h2>About Us</h2>
          <i className="ri-menu-3-line"></i>
        </div>
        <div id="elems">
          <div id="elem1">
            <div id="image-div">
              <img
                src="https://t3.ftcdn.net/jpg/02/52/38/80/360_F_252388016_KjPnB9vglSCuUJAumCDNbmMzGdzPAucK.jpg"
                alt="CarveCart"
              />
            </div>
            <h4>
              CARVECART <span>NEW</span>
            </h4>
            <p>
              CarveCart is an innovative food delivery platform, built on the
              powerful MERN stack. Our app streamlines the process of ordering
              from a wide selection of restaurants, with a focus on providing a
              seamless user experience for food lovers everywhere.
            </p>
          </div>
          <div id="elem2">
            <h2>OUR TEAM</h2>
            <h3>
              Arya Joshi & Ananya Chitale
              <br />
              talented developers —
              <br />
              behind CarveCart.
            </h3>
            <h6>Tip! Drag sideways to navigate</h6>
          </div>
          <div id="elem3">
            <div id="image-div">
              <img
                src="https://www.asokart.com/wp-content/uploads/2019/01/6-Nataraja-600x805.jpg"
                alt="Visionaries"
              />
            </div>
            <h4>
              The visionaries behind CarveCart <span>NEW</span>
            </h4>
            <p>
              Arya and Ananya are the sole visionaries behind CarveCart, having
              designed and developed every core feature using cutting-edge
              technologies like React, MongoDB, Express, and Node.js. Their
              combined expertise has shaped the app into a seamless and
              intuitive platform for food delivery.
            </p>
          </div>
        </div>
        <h1>CraveCart.</h1>
      </div>

      <div id="page4">
        <div id="page4-left">
          <img
            src="https://uploads-ssl.webflow.com/5f2429f172d117fcee10e819/605c679f33f67d3dd00b04b4_avatar-3.jpeg"
            alt="Founders"
          />
        </div>
        <div id="page4-right">
          <p>
            CRAVECart is here to make your food delivery experience effortless
            and enjoyable. Offering a wide range of dishes from local favorites
            to gourmet meals, we prioritize quality and convenience in every
            order.
            <br />
            Founded by Ananya Chitale and Arya Joshi, CRAVECart is dedicated to
            bringing you exceptional service with just a few clicks. Enjoy
            delicious meals delivered straight to your door!
          </p>
        </div>
      </div>

      <div id="page5">
        <div className="scrolling-text">
          <h1>
            Let's create something together <span>Email me</span>
          </h1>
          <h1>
            Let's create something together <span>Email me</span>
          </h1>
          <h1>
            Let's create something together <span>Email me</span>
          </h1>
          {/* Duplicate content to ensure continuous scrolling */}
          <h1>
            Let's create something together <span>Email me</span>
          </h1>
          <h1>
            Let's create something together <span>Email me</span>
          </h1>
          <h1>
            Let's create something together <span>Email me</span>
          </h1>
        </div>
      </div>

      
    </div>
  );
};

export default AboutUs;

Home.jsx

import React, { useEffect } from 'react';
import './Header.css'; // Ensure this contains the necessary CSS
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

const Header = () => {
  // Register ScrollTrigger
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    const loadingAnimation = () => {
      const tl = gsap.timeline();

      tl.from("#page1", {
        opacity: 0,
        duration: 0.2,
        delay: 0.2,
      })
      .from("#page1", {
        transform: "scaleX(0.7) scaleY(0.2) translateY(80%)",
        borderRadius: "150px",
        duration: 2,
        ease: "expo.out",
      })
      .from("nav", {
        opacity: 0,
        duration: 0.5,
        delay: -1,
      })
      .to("nav", {
        opacity: 1, // Ensure navbar becomes visible
        duration: 0.5
      })
      .from("#page1 h1, #page1 p, #page1 div", {
        opacity: 0,
        duration: 0.5,
        stagger: 0.2,
      });
    };

    // Call the animation function when the component mounts
    loadingAnimation();
  }, []);

  return (
    <div id="main">
      <nav className="visible">
        {/* Your nav content goes here */}
      </nav>
      
      <div id="page1">
        <h1>
          <span className="color">Fast</span> cravings,{" "}
        </h1>
        <h1>
          D
          <span>
            <svg className="c-bttn__morph" fill="none" viewBox="0 0 131 136">
              <path
                className="g-path"
                data-morph="end"
                fill="#fff"
                d="M48 77.457v7.224h7.224l21.307-21.306-7.224-7.225L48 77.457Zm34.118-19.67a1.919 1.919 0 0 0 0-2.716l-4.508-4.508a1.919 1.919 0 0 0-2.716 0l-3.526 3.526 7.224 7.224 3.526-3.525Z"
              ></path>
            </svg>
          </span>
          ne with <span className="color2">ease.</span>
        </h1>
        <p>
          Delivering deliciousness to your doorstep with speed and simplicity.{" "}
          <br /> seamless dining with our cutting-edge technology
          <br />
        </p>
      </div>
      <div id="page2"></div>
    </div>
  );
};

export default Header;

Here is the codesandBox link Check the App.jsx to make the changes:

https://codesandbox.io/p/live/8355c488-0788-48ab-ab64-93934edc4cd8

Solution

  • Issue

    The issue here is "polluted" global CSS styling. When the <Route path='/about' element={<AboutUs />} /> route is added to the routes, the AboutUs component is imported, including its AboutUs.css file which is loaded into the DOM and applied. Many of your various CSS files all define rules targeting the same CSS selectors, so the AboutUs CSS styles are overriding various elements of your nav bar and header, and likely other routed components.

    Compare for example the applied h1 element rules:

    Without the AboutUs route and CSS

    AboutUs and CSS excluded

    With the AboutUs route and CSS included

    AboutUs and CSS included

    Note that AboutUs.css's #page1 h1 rule is applied even though the URL path is still "/" and the Home component is rendered.

    AboutUs.css

    #page1 h1 {
  font-size: 300px;
  letter-spacing: -25px;
  font-weight: 100;
  font-family: canopee;
  background-color: #1c1c19;
  color: #c4bcb3;
  line-height: 600px;
  width: 97%;
  margin-left: 0%;
}

    Solution

    CSS is globally applied, so the solution is to limit the scope of your CSS rules via selectors. This is generally achieved by wrapping a specific page or section/area/etc in a class or some unique identifier.

    Example:

    AboutUs.jsx

    Provide an "about-us" CSS classname to one of the component's root elements that wraps the page component's content.

    import React, { useEffect } from "react";
import LocomotiveScroll from "locomotive-scroll";
import gsap from "gsap";
import "./AboutUs.css";

const AboutUs = () => {
  ...

  return (
    <div className="about-us" id="main-content"> // <-- "about-us" CSS classname
      ...
    </div>
  );
};

export default AboutUs;

    AboutUs.css

    Here I'm only showing a single rule, i.e. all h1 elements that are descendants of any elements with the "about-us" CSS classname, but this will be done for any CSS rules you want to apply and limit to the About page's content.

    .about-us h1 {
  font-size: 300px;
  letter-spacing: -25px;
  font-weight: 100;
  font-family: canopee;
  background-color: #1c1c19;
  color: #c4bcb3;
  line-height: 600px;
  width: 97%;
  margin-left: 0%;
}

    You can see here that the AboutUs.css is loaded but the h1 element's CSS on the home page isn't polluted by the about page's CSS.

    non-polluted CSS on home page