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
The
className
specified inNavbar
isn’t consistent with the CSS. Identifiers are case-sensitive. UpdateclassName="Navbar"
toclassName="navbar"
.Also, since you are using React-Router-DOM 6, the
Route
should use theelement
prop and pass JSX and there is noexact
prop, e.g.<Route path="/" element={<Home />} />
.you have
navbar
class incss
butNavbar
injsx
file fix it