React Router

Question

Dzień dobry,

Mam mały problem w związku z react-router, chce, aby po kliknieciu w dany Link np: "O nas" wysyłało uzytkownika do tej sekcji na stronie głównej, natomiast po kliknieciu owtiera mi ten komponent jako inna podstrone. Pewnie jest coś zle napisane... Mam komponent Home w kórym umieściłem cała apke... Juz przy tym chwile siedze.

import React from 'react'
import Navbar from "./Navbar";
import Hero from "./Hero";
import About from "./About";
import Offer from "./Offer";
import Contact from "./Contact";
import Footer from "./Footer";


function Home() {
  return (
    <div>
      <Navbar/>
      <Hero/>
      <About/>
      <Offer/>
      <Contact/>
      <Footer/>
    </div>
  )
}

export default Home

tutaj cały App, i poniżej Nav :

import {Routes, Route, Navigate } from "react-router-dom";
import Home from "./components/Home";
import Sweets from "./pages/Sweets";
import WeddingCakes from "./pages/WeedingCakes";
import BirthdayCakes from "./pages/BirthdayCakes";
import OccasionalCakes from "./pages/OccasionalCakes";
import OrderCake from "./pages/OrderCake";
import About from "./components/About";
import Offer from "./components/Offer";
import Contact from "./components/Contact";

const cakesForWeedings = [
  {
    id: "0",
    name: "Tort weselny",
    img: "/images/Slodki-stol/tort.jpg",
    about:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, porro",
    portion: [
      { value: "Wybierz ilość", price: ""},
      { value: "8-9 porcji", price: "Cena: 300 zł"},
      { value: "13-15 porcji", price: "Cena: 500 zł"},
      { value: "20-23 porcji", price: "Cena: 700 zł"},
    ],
    taste: [
      { value: "Wybierz smak" },
      { value: "malinowy" },
      { value: "truskawkowy" },
      { value: "czekoladowy" },
    ],
  },
  {
    id: "1",
    name: "Torcik weselny",
    img: "/images/Torty/tort-jesien.jpg",
    about:
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus reprehenderit exercitationem eligendi vel, quo ut in. Quisquam est repudiandae ad",
      portion: [
        { value: "Wybierz ilość", price: ""},
        { value: "5-8 porcji", price: "Cena: 200 zł"},
        { value: "10-15 porcji", price: "Cena: 300 zł"},
        { value: "20-23 porcji", price: "Cena: 400 zł"},
      ],
      taste: [
        { value: "Wybierz smak" },
        { value: "bananowy" },
        { value: "truskawkowy" },
        { value: "waniliowy" },
      ],
  },
];

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />}/>
        <Route path="/about" element={<About/>}/>
        <Route path="/offer" element={<Offer/>}/>
        <Route path="/contact" element={<Contact/>}/>
      
        <Route
          path="/torty-weselne"
          element={<WeddingCakes data={cakesForWeedings} />}
        />
        <Route path="/torty-urodzinowe" element={<BirthdayCakes />} />
        <Route path="/torty-okolicznosciowe" element={<OccasionalCakes />} />
        <Route path="/ciastka" element={<Sweets />} />
        <Route
          path="tort/:name"
          element={<OrderCake data={cakesForWeedings} />}
        />
          <Route
        path="*" element={<Navigate to="/" replace />}
    />
      </Routes>
      </div>
  );
}

export default App;

Nav:

import { useState } from "react";
import { TiArrowSortedDown } from "react-icons/ti";
import { Link } from "react-router-dom";

function Navbar() {
  const [open, setOpen] = useState(false);
  const [showList, setShowList] = useState(false);
  const [scroll, setScroll] = useState(false);

  
  const handleNav = () => {
    setOpen(!open);
    setScroll(!scroll);
    if (!scroll) {
      document.body.style.overflowY = "hidden";
      console.log('block')
    } else if (scroll) {
      document.body.style.overflowY = "scroll";
      console.log('scroll')
    }
  };
  const handleClick = () => {
    setOpen(!open);
    setScroll(!scroll);
    if (!scroll) {
      document.body.style.overflowY = "hidden";
      console.log("block");
    } else if (scroll) {
      document.body.style.overflowY = "scroll";
      console.log("scroll");
    }
  };
  const handleList = () => {
    setOpen(!open);
    setShowList(!showList);
    setScroll(!scroll);
    if (!scroll) {
      document.body.style.overflowY = "hidden";
      console.log("block");
    } else if (scroll) {
      document.body.style.overflowY = "scroll";
      console.log("scroll");
    }
  };

  return (
    <div className="w-full z-50 md:absolute top-0 left-0 sticky h-0">
      {/* nav-desktop */}
      <div className="hidden h-20 md:flex bg-rose-50 bg-opacity-80 absolute top-0 left-0 w-full">
        <ul className="flex w-full justify-around items-center">
          <li className="text-md text-slate-600 hover:text-slate-900 cursor-pointer">
            <Link to="/">Home</Link>
          </li>
          <li className="text-md text-slate-600 hover:text-slate-900 cursor-pointer">
            <Link to="/about">O nas</Link>
          </li>
          <li className="text-md text-slate-600 hover:text-slate-900 cursor-pointer">
            <Link to="/offer">Oferta</Link>
          </li>

          <li
            onClick={() => setShowList(!showList)}
            className={
              !showList
                ? "relative text-md text-slate-600 hover:text-slate-900 cursor-pointer flex items-center"
                : "relative text-md flex items-center text-slate-600 cursor-pointer"
            }
          >
            Torty{" "}
            <TiArrowSortedDown
              className={
                !showList
                  ? "ml-5 mt-[4px] text-xl transition-all z-50"
                  : "transition-all rotate-180 ml-5 mt-[4px] text-xl"
              }
            />
            <ul
              className={
                showList
                  ? "visible opacity-100 absolute  top-14 left-0 text-slate-600 px-4 py-4 transition-all duration-200 ease-in bg-rose-50 bg-opacity-60 rounded-lg"
                  : "invisible opacity-0 absolute top-12 left-0 text-slate-600 py-4 px-4 transition-all duration-200 ease-in bg-rose-50 bg-opacity-60 rounded-lg"
              }
            >
              <li
                onClick={() => setShowList(!showList)}
                className="hover:text-slate-900"
              >
                <Link to="/torty-weselne">Torty weselne</Link>
              </li>
              <li
                onClick={() => setShowList(!showList)}
                className="mt-2 hover:text-slate-900"
              >
                <Link to="/torty-urodzinowe">Torty urodzinowe</Link>
              </li>
              <li
                onClick={() => setShowList(!showList)}
                className="mt-2 hover:text-slate-900"
              >
                <Link to="/torty-okolicznosciowe">Torty okolicznościowe</Link>
              </li>
            </ul>
          </li>
          <li className="text-md text-slate-600 hover:text-slate-900 cursor-pointer">
            <Link to="/ciastka">Ciastka</Link>
          </li>
          <li className="text-md text-slate-600 hover:text-slate-900 cursor-pointer">
            <Link to="/contact">Kontakt</Link>
          </li>
        </ul>
      </div>
      {/* kontener na burger*/}
      <div className="md:hidden px-2 h-[50px] flex justify-end items-center">
        {/* burger-btn */}
        <div
          className="relative w-[26px] h-[20px] mr-4 z-50"
          onClick={handleNav}
        >
          <div
            className={
              open
                ? "absolute top-[calc(50%-2px)] rotate-45 w-full h-[4px] ease-in-out duration-300 rounded-full bg-slate-400"
                : "absolute w-full h-[4px] top-0 bg-slate-300 rounded-full ease-in-out duration-300"
            }
          ></div>
          <div
            className={
              open
                ? "absolute opacity-0 w-full h-[4px] bg-slate-400 rounded-full ease-in duration-200"
                : "absolute w-full h-[4px] top-[calc(50%-2px)] bg-slate-300 rounded-full ease-in duration-200"
            }
          ></div>
          <div
            className={
              open
                ? "absolute bottom-[calc(50%-2px)] -rotate-45 w-full h-[4px] ease-in-out duration-300 rounded-full bg-slate-400"
                : "absolute w-full h-[4px] bottom-0 bg-slate-300 rounded-full ease-in-out duration-300"
            }
          ></div>
        </div>
      </div>
      {/* nav-mobile */}
      <div
        className={
          open
            ? "md:hidden h-screen overflow-x-hidden absolute top-0 w-[100%]  z-30 right-0 duration-300 ease-in-out bg-rose-50 bg-opacity-[92%]"
            : "md:hidden h-screen overflow-x-hidden absolute top-0  right-[-100%] z-30 w-[100%] duration-300 ease-in-out bg-rose-50 bg-opacity-[92%]"
        }
      >
        <ul className="w-full h-full space-y-9 pt-10 z-50 pl-8">
          <li onClick={handleClick} className="text-md text-slate-600 cursor">
            <Link to="/">Home</Link>
          </li>
          <li
            onClick={handleClick}
            className="text-md text-slate-600 cursor-pointer"
          >
            <Link to="/about">O nas</Link>
          </li>
          <li
            onClick={handleClick}
            className="text-md text-slate-600 cursor-pointer"
          >
            <Link to="/">Oferta</Link>
          </li>
          <li
            onClick={() => setShowList(!showList)}
            className="text-md text-slate-600 relative cursor-pointer"
          >
            Torty{" "}
            <TiArrowSortedDown
              className={
                !showList
                  ? "text-xl absolute top-1 left-12 duration-100 ease-in"
                  : "duration-100 ease-in rotate-180 absolute text-xl top-1 left-12"
              }
            />
            <ul
              className={
                showList
                  ? "mt-5 space-y-5 opacity-100 visible transition-all duration-100 ease-in"
                  : "invisible opacity-0 transition-all ease-out space-y-5 h-0"
              }
            >
              <li onClick={handleList}>
                <Link to="/torty-weselne">Torty weselne</Link>
              </li>
              <li onClick={handleList} className="mt-2">
                <Link to="/torty-urodzinowe">Torty urodzinowe</Link>
              </li>
              <li onClick={handleList} className="mt-2">
                <Link to="/torty-okolicznosciowe">Torty okolicznościowe</Link>
              </li>
            </ul>
          </li>
          <li
            onClick={handleClick}
            className="text-md text-slate-600 cursor-pointer"
          >
            <Link to="/ciastka">Ciastka</Link>
          </li>
          <li
            onClick={handleClick}
            className="text-md text-slate-600 cursor-pointer"
          >
            <Link to="/">Kontakt</Link>
          </li>
        </ul>
      </div>
    </div>
  );
}

export default Navbar;

Bede wdzieczny za pomoc.

Milego dzionka :)

Comments

Używasz BrowserRouter lub HashRouter?

---

@ferdynand, skecje... nie wykorzystuj do routingu... to wystarczy zwykła obsługa z tzw odniesieniem 
w HTMLU... nawet 
https://stackoverflow.com/questions/8424785/link-to-a-section-of-a-webpage#:~:text=Simple%3A,Use%20.

Skoro wszystko masz na 1 stronie, to wystarczy CI tzw. odnośnik do podsekcji. 

---

Czyli poprostu umieścic to w <a href> ???

Ale czy wtedy tak jest poprawnie ? W sensie, jeśli używam router to wszystko powinno być w nim obsługiwane ?