skip to Main Content

I am enrolled in a full stack web development course and currently learning react on the side to build a project for my portfolio in hopes of getting into a front end web developer position.

Found this 2 year old tutorial in which I thought was a decent start to learn: https://www.youtube.com/watch?v=QwarZBtFoFA&t=700s, and this is my third hurdle that I haven’t been able to get over.

No errors are showing up, I’ve tried changing tags around, moving/renaming, and searching for an answer but I can’t seem to get the right one.

TIA

components/Navbar.js

import React, { useState } from 'react';
import Logo from '../images/HHlogo.jpg';
import { Link } from 'react-router-dom';
import "../styles/Navbar.css";

function Navbar() {
  return (
    <div className="Navbar">
      <div className="leftSide">
        <img src={Logo} alt=',' />
      </div>
      <div className="rightSide">
        <Link to="/Home">Home </Link>
        <Link to="/About">About </Link>
        <Link to="/Classes">Classes </Link>
        <Link to="/Gallery">Gallery </Link>
        <Link to="/Trainer">Trainer </Link>
        <Link to="/Testimonial">Testimonial </Link>
        <Link to="/Contact">Contact </Link>
      </div>
    </div>
  );
}

export default Navbar

src/styles/Navbar.css

.navbar {
  width: 100%;
  height: 100px;
  background-color: #121619;
  display: flex;
  flex-direction: row;
}

.navbar .leftSide {
  flex: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 150px;
}

.navbar .leftSide img {
  width: 70px;
}

.navbar .rightSide {
  flex: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar a {
  color: white;
  text-decoration: none;
  margin: 20px;
}

.navbar .rightSide button {
  background-color: transparent;
  border: none;
  color: white;
  cursor: pointer;
}

.navbar .rightSide svg {
  font-size: 40px;
}

.navbar #open {
  padding-left: 0px;
}
.navbar #open img {
  display: none;
}

.navbar #close img {
  display: inherit;
}

.navbar #open .hiddenLinks {
  display: inherit;
  margin-left: 30px;
}

.navbar #close .hiddenLinks {
  display: none;
}

.navbar #open a {
  width: 70px;
  margin: 5px;
}
@media only screen and (max-width: 900px) {
  .navbar .rightSide a {
    width: 70px;
  }
  .navbar .leftSide {
    padding-left: 50px;
  }
}

@media only screen and (max-width: 600px) {
  .navbar .rightSide a {
    display: none;
  }

  .navbar .rightSide {
    justify-content: flex-end;
    padding-right: 50px;
  }

  .navbar .rightSide button {
    display: inherit;
  }
}

@media only screen and (min-width: 600px) {
  .navbar .rightSide button {
    display: none;
  }

  .hiddenLinks {
    display: none;
  }
}

src/App.js

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

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" exact component={Home} />
        </Routes>
      </Router>
    </div>


  );
}

export default App;

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

2

Answers


  1. The className specified in Navbar isn’t consistent with the CSS. Identifiers are case-sensitive. Update className="Navbar" to className="navbar".

    Also, since you are using React-Router-DOM 6, the Route should use the element prop and pass JSX and there is no exact prop, e.g. <Route path="/" element={<Home />} />.

    Login or Signup to reply.
  2. you have navbar class in css but Navbar in jsx file fix it

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search