Navigate through components in reactjs
So i will post 3 images on comments pls check out tell any solutions or ideas
Check images and see code so it would make sense the problem I'm facing
here the code:
navlinks.jsx
Home.js
Check images and see code so it would make sense the problem I'm facing
here the code:
navlinks.jsx
export function NavBar(){
let [nav,setNav] = useState("home");
return(
<div id="navbar-container" >
<div id="navlinks">
<p onClick={ ()=>setNav("home") } >
<Link to="/" className={nav==='home'?"active":" "}>Home</Link>
</p>
<p onClick={ ()=>setNav("about") } >
<Link to="/about" className={nav==='about'?"active":" "} >About</Link>
</p>
<p onClick={ ()=>setNav("projects") } >
<Link to="/projects" className={nav==='projects'?"active":" "}>Projects</Link>
</p>export function NavBar(){
let [nav,setNav] = useState("home");
return(
<div id="navbar-container" >
<div id="navlinks">
<p onClick={ ()=>setNav("home") } >
<Link to="/" className={nav==='home'?"active":" "}>Home</Link>
</p>
<p onClick={ ()=>setNav("about") } >
<Link to="/about" className={nav==='about'?"active":" "} >About</Link>
</p>
<p onClick={ ()=>setNav("projects") } >
<Link to="/projects" className={nav==='projects'?"active":" "}>Projects</Link>
</p>Home.js
export function HomePage(){
let Navigate = useNavigate()
function redirectProjetcs(){
Navigate('/projects');
}
return(
<>
<motion.button
whileHover={{
scale:1.2,origin:0,boxShadow:'5px 5px 5px lightblue'
}}
onClick={redirectProjetcs}
>Projects</motion.button>
</div>
</>
)
}export function HomePage(){
let Navigate = useNavigate()
function redirectProjetcs(){
Navigate('/projects');
}
return(
<>
<motion.button
whileHover={{
scale:1.2,origin:0,boxShadow:'5px 5px 5px lightblue'
}}
onClick={redirectProjetcs}
>Projects</motion.button>
</div>
</>
)
}
