I am following a youtube video (three.js ) to make web portfolio. Now I made some changes to the components according to the links I want. One of the links, i.e link to the project, is not working but the other two links about and contact are working and I can jump to those components. I tried debugging the code but I don’t know where the id’s are coming from if someone can review my code it would be great.
Navbar.js
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { styles } from '../styles';
import { navLinks } from "../constants";
import { logo, menu, close } from '../assets';
const Navbar = () => {
const [active, setActive] = useState("");
const [toggle, setToggle]=useState(false);
return (
<nav className={`${styles.paddingX} w-full flex items-center py-5 fixed top-0 z-20 bg-primary`}>
<div className='w-full flex justify-between items-center max-w-7xl mx-auto'>
<Link to ="/" className='flex items-center gap-2' onClick
={()=>{
setActive("");window.scrollTo(0,0);
}}> <img src={logo} alt='logo' className='w-9 h-9 object-contain' />
<p className='text-white text-[18px] font-bold cursor-pointer'>
ar <span className='sm:block hidden'></span></p>
</Link>
<ul className='list-none hidden sm:flex flex-row gap-10'>
{navLinks.map((link)=>(
<li key={link.id} className={`${active === link.title ? "text-white":"text-secondary"}
hover:text-white text-[18px] font-medium cursor-pointer
`}
onClick={()=> setActive(link.title)}
>
<a href={`#${link.id}`}>{link.title}</a>
{/* <Link to={`#${link.id}`}>{link.title}</Link> */}
</li>
))}
</ul>
<div className='sm:hidden flex flex-1 justify-end items-center'>
<img src={toggle?close:menu} alt="menu" className='w-[28px] h-[28px] object-contain cursor-pointer'
onClick={()=>setToggle(!toggle)}/>
<div className={`${!toggle ? 'hidden' :'flex'} p-6 black-gradient absolute top-20 right-0 mx-4 my-2 min-w-[140px] z-10 rounded-xl` }>
<ul className='list-none flex justify-end items-start flex-col gap-4'>
{navLinks.map((link)=>(
<li key={link.id} className={`${active === link.title ? "text-white":"text-secondary"}
font-poppins font-medium cursor-pointer text-[16px]
`}
onClick={()=>{ setToggle(!toggle) ; setActive(link.title)}}
>
<a href={`#${link.id}`}>{link.title}</a>
{/* <Link to={`#${link.id}`}>{link.title}</Link> */}
</li>
))}
</ul>
</div>
</div>
</div>
</nav>
)
}
export default Navbar
In constants /index.js
export const navLinks = [
{
id: "about",
title: "About",
},
{
id: "work",
title: "Project",
},
{
id: "contact",
title: "Contact",
},
];
App.js
import { BrowserRouter } from "react-router-dom";
import {
About,
Contact,
Experience,
StarsCanvas,
Works,
Tech,
Navbar,
Hero,
Feedbacks
} from "./components";
const App = () => {
return (
<BrowserRouter>
<div className="relative z-0 bg-primary" >
<div className="bg-hero-pattern bg-cover bg-no-repeat bg-center">
<Navbar />
<Hero />
</div>
<About />
<Experience />
<Tech />
<Works />
<Feedbacks />
<div className="relative z-0">
<Contact />
<StarsCanvas />
</div>
</div>
</BrowserRouter>
)
}
export default App
Here is the file structure
enter image description here
three links
