Когда я пытаюсь добавить ссылку на страницу «О нас» на панель навигации и включить ее в app.jsx, домашняя страница в конечном итоге становится запутанной и немного беспорядочной. В частности, когда я не добавляю ссылки на панель навигации, все работает отлично. Однако когда я пытаюсь включить, например, ссылку «О нас» в раздел «Главная» панели навигации, я сталкиваюсь с проблемой, когда стили страницы «О нас» совпадают со стилями домашней страницы.

NAVBAR Изображение, пожалуйста, обратитесь к этому изображению для справки.

Изображение главной страницы Посмотрите на это изображение Это сайт, который я хочу, когда добавляю страницу «О нас» на панель навигации.

но когда я добавляю или маршрутизирую страницу о нас в App.jsx, моя домашняя страница искажается вот так

Искаженное изображение главной страницы Вот как выглядит iamge, когда я добавляю раздел «О нас» в маршрут.

Вот код для обоих

Навбар.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;

Приложение.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;

когда я добавляю параметр «Маршрут» на свою страницу «О нас», он перекрывается на главной странице.

Код AboutUs.jsx

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;

Вот ссылка codeandBox. Проверьте App.jsx, чтобы внести изменения:

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