Kevin Powell - Community•3mo ago

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

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>
        </>
    )
}

9 Replies

vic•3mo ago

image 1

vic•3mo ago

image 2

vic•3mo ago

image 3

Zec•3mo ago

Where does useNavigate get imported from? Many navigation libraries have a router system that you can use, so you don’t have to implement it yourself^ Unrelated to your question, I’d highly recommend using a button or a instead of a p, for interactivity..

Zec•3mo ago

https://gitnation.com/contents/authoring-html-in-a-javascript-world

Authoring HTML in a JavaScript World by Tony Alicea - Video recordi...

In this talk, Tony shows how an authoring and semantic HTML-first approach to JSX template work leads to more readable, maintainable, and accessible UI components. He demonstrates how to think through implementing a UI prototype in a semantic way, authoring HTML before visuals. He shows how accessible markup improves performance, reduces DOM si...

Zec•3mo ago

Where is your NavBar added to HomePage? I don’t see it I’d recommend using window.location.pathname for URL tracking instead of React state; it’s managed for you (by the browser), it won’t get lost when the navbar unmounts from the DOM, and should stay consistent with the current page ie compare window.location.pathname to “/projects”, “/“, “/about”, etc

vic•3mo ago

I use useNavigate hook , i only send the component code Ok By using this, will the page reloads ?

missymae•3mo ago

useNavigate is a react router dom method, just fyi. In Home.js, you have a redirectProjectcs method that navigates to /projects, but it doesn't look like it changes the value of nav, so when NavBar loads, it doesn't know the state should change. So you can either use a different way to represent the nav state, or some way of passing it down from your home component. I haven't had to look at RRD for a while and don't know exactly what to suggest.

vic•3mo ago

Yes u r right I create the state on app.jsx and pass Thanks

Gaming

Programming

Navigate through components in reactjs