Why is my button not firing, bringing me to the profile page?-CodePudding

I think I may be having problems executing the REACT Router. The version of REACT Router DOM in my package.json is "react-router-dom": "^6.6.2". The first component below(App.js) is the code with my Routing. When the button in the second component(the Nav.js) below is clicked it should bring the user to the "profile" page(this component is not listed below). I am not sure if the issue is in the App component that has my routing or possibly in the Nav component that contains the button the routes to "profile".

import React, { useEffect } from 'react';
import HomeScreen from "./HomeScreen";
import ProfileScreen from "./screens/ProfileScreen";
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";`enter code here`
import Login from "./screens/Login"
import { auth } from "./firebase";
import { login, logout } from "./features/userSlice";
import { useDispatch, useSelector } from 'react-redux';
import { selectUser } from "./features/userSlice";
import './App.css';

function App() {

const user =useSelector(selectUser);
const dispatch = useDispatch();



useEffect(()=>{           /*The useEffect will listen to the users logged in state*/
const unsubscribe = auth.onAuthStateChanged((userAuth) =>{     /*This is a listener that 

  if (userAuth) {
   
    dispatch(login({
      uid:userAuth.uid,
      email:userAuth.email,
    }))
  } else{
    //logged out
    dispatch(logout)
  }



});

return unsubscribe;   /*detaching the listener*/
}, [] );






return (
<div className="app">
  <Router>
    {!user ? (
      <Login/>) : (
   
    <Routes>
      <Route  path="/profile" element={<ProfileScreen />}/>
      <Route  path="/" element={<HomeScreen />}/>
    </Routes>
      )}
  </Router>
</div>
);
}

export default App;

Here is my code with the button that is not working.The button is in the second image portion:

import React, { useState, useEffect } from 'react'
import "./Nav.css"
import { useNavigate } from "react-router-dom";

function Nav() {
const [show, handleShow] = useState(false);
const navigate = useNavigate()
const transitionNavBar = () => {
if(window.scrollY > 100) {
    handleShow(true);
} else {
    handleShow(false)
}
};

useEffect(()=>{
window.addEventListener("scroll", transitionNavBar);
return () => window.removeEventListener("scroll", transitionNavBar);/*clean up*/
}, [])


return (
<div className ={`nav ${show && 'nav nav_black'}`}>
    <div className="nav_contents">
        
        <img 
        className="nav_logo"
        src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png" 
        alt=""/>


        <img 
        onClick={() => navigate.push("/profile")}
        className="nav_avatar"
        src="data:image/jpeg
        alt=""/>
        </div>

   

 </div>
 )
 }

 export default Nav

CodePudding user response：

Do not use navigate.push("/profile"), instead use navigate("/profile"). This worked for me.

CodePudding user response：

<img 
    onClick={() => navigate("/profile")}
    className="nav_avatar"
    src="data:image/jpeg"
    alt=""
/>

learn more about React Router useNavigate