REACT JS navbar links not working

[fb1989]

Hi guys, I’m new to coding and react js. I’ve spent the last 3 days trying to make my navbar links work. Can anyone please help me. I’ve copied the app.js, navbar.js and about.js page.

 // App.js
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import HeroSection from "./components/heroSection";
import Home from "./components/pages/home";
import About from "./components/pages/About";
import Repair from "./components/pages/Repair";
import Service from "./components/pages/Service";
import RefurbishedMachines from "./components/pages/RefurbishedMachines";
import Parts from "./components/pages/Parts";
import Footer from "./components/Footer";

function App() {
  return (
    <Router>
      <Navbar />
      <HeroSection />
      <Footer />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/repair" element={<Repair />} />
        <Route path="/service" element={<Service />} />
        <Route path="/refurbished" element={<RefurbishedMachines />} />
        <Route path="/parts" element={<Parts />} />
      </Routes>
    </Router>
  );
}

export default App;                                                                                     import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import Logo from "../images/logo.png";
import "./Navbar.css";
import { Button } from "./Button";
import Dropdown from "./Dropdown";

function Navbar() {
  const [click, setClick] = useState(false);
  const [dropdown, setDropdown] = useState(false);
  const [button, setButton] = useState(true);
  const handleClick = () => setClick(!click);
  const closeMobileMenu = () => setClick(false);

  const showButton = () => {
    if (window.innerWidth <= 960) {
      setButton(false);
    } else {
      setButton(true);
    }
  };
  const onMouseEnter = () => {
    if (window.innerWidth < 960) {
      setDropdown(false);
    } else {
      setDropdown(true);
    }
  };

  const onMouseLeave = () => {
    if (window.innerWidth < 960) {
      setDropdown(false);
    } else {
      setDropdown(false);
    }
  };

  useEffect(() => {
    showButton();
  }, []);

  window.addEventListener("resize", showButton);

  return (
    <>
      <nav className="navbar">
        <div className="navbar-container">
          <Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
            <img src={Logo} height={170} width={200} alt="Logo" />
          </Link>
          <div className="menu-icon" onClick={handleClick}>
            <i className={click ? "fas fa-times" : "fas fa-bars"} />
          </div>
          <ul className={click ? "nav-menu active" : "nav-menu"}>
            <li className="nav-item">
              <Link to="/" className="nav-links" onClick={closeMobileMenu}>
                Home
              </Link>
            </li>
            <li className="nav-item">
              <Link to="/about" className="nav-links" onClick={closeMobileMenu}>
                About
              </Link>
            </li>
            <li
              className="nav-item"
              onMouseEnter={onMouseEnter}
              onMouseLeave={onMouseLeave}
            >
              <Link to="/" className="nav-links" onClick={closeMobileMenu}>
                Coffee Machine Services{" "}
                <i className="fa-solid fa-chevron-down fa-2xs" />
              </Link>
              {dropdown && <Dropdown />}
              <ul className="dropdown-menu">
                <li className="nav-item">
                  <Link
                    to="/coffeemachineservices/repair"
                    className="nav-links"
                    onClick={closeMobileMenu}
                  >
                    Repair
                  </Link>
                </li>
                <li className="nav-item">
                  <Link
                    to="/coffeemachineservices/service"
                    className="nav-links"
                    onClick={closeMobileMenu}
                  >
                    Service
                  </Link>
                </li>
              </ul>
            </li>
            <li className="nav-item">
              <Link to="/" className="nav-links" onClick={closeMobileMenu}>
                Shop{" "}
                <i
                  className="fa-solid fa-chevron-down fa-2xs"
                  id="dropdownmenu"
                />
              </Link>
              <ul className="dropdown-menu">
                <li className="nav-item">
                  <Link
                    to="/shop/refurbished"
                    className="nav-links"
                    onClick={closeMobileMenu}
                  >
                    Refurbished Machines
                  </Link>
                </li>
                <li className="nav-item">
                  <Link
                    to="/shop/parts"
                    className="nav-links"
                    onClick={closeMobileMenu}
                  >
                    Parts
                  </Link>
                </li>
              </ul>
            </li>
            <li>
              <Link
                to="/contact-us"
                className="nav-links-mobile"
                onClick={closeMobileMenu}
              >
                Contact Us
              </Link>
            </li>
          </ul>
          {button && <Button buttonStyle="btn--outline">Contact Us</Button>}
        </div>
      </nav>
    </>
  );
}

export default Navbar;
                    import React from "react";
import "../../App.css";
import HeroSection from "../heroSection";
import Footer from "../Footer";

function About() {
  return (
    <>
      <h1>Hello World</h1>
      <HeroSection />
      <Footer />
    </>
  );
}

export default About;

[DanielHuebschmann]

Welcome!

React and other framework code (especially code that’s not part of the curriculum) is hard to debug when we can’t run the app. Sometimes the errors are only visible in the console.

To improve your chances to get help, please post code like this in an online editor (Stackblitz, CodePen etc.) and share the link. Also run tests to show us error messages you are encountering. Thanks!

[fb1989]

Thank you, I’m putting it on Github, I’ll link the repository as soon as I’ve done it

[fb1989]

Here’s my Github repository

GitHub - fbibi4/bean-to-cup-website at master

[DanielHuebschmann]

That’s a start, but still not interactive like in https://stackblitz.com/

Sorry, but I and the other pros here won’t look at hundreds of lines of code to maybe find a bug or set up your project in our IDEs. We are already doing this all day.

Try to get a live demo running at Stackblitz or https://codepen.io/.

Thanks

Maybe one of the students here has the time?

[lasjorg]

It is working, it just likely isn’t doing what you want it to do. I would suggest you read the react-router-dom documentation.

If you want something to be on all pages (nav and footer) you should not have the components inside your page components. Otherwise, you will double them.

If you only want the hero section on the home page it should be inside that component, not on all pages.

The path for the component should match the to path. If you have nested paths to="/coffeemachineservices/repair" the Route path should match that.

---

Depending on the type of page you are creating you might find something like Astro with a bit of React added as needed more suitable. I would also suggest looking at Next.js instead of a SPA using create-react-app (I would switch CRA to Vite at the very least). Next.js uses a file-based router which can be easier to use.

[fb1989]

Hi, thank you for your help. I’ll read up on react-router-dom and check my pathways