setLoginUser is not a function

Question

I am making a login application when i am clicking the login button the i am reciving an error (loginPage.js:33 Uncaught (in promise) TypeError: setLoginUser is not a function) here is the code of app.js

function App() {
  const [user,setLoginUser] = useState({})
return(
  <div className='App'>
<BrowserRouter>
  < Routes>
    <Route path="/homepage" element={user && user?._id? <Homepage /> : <Login setLoginUser={setLoginUser} />}/>
   
    <Route path="/login" element={<Login />} setLoginUser={setLoginUser}/>
    <Route path="/register" element={<Register />} />
  </Routes>
</BrowserRouter>
   
  </div>
)
}

and here is the code of loginPage.js where error is occuring

const Login = ({ setLoginUser }) => {
   const login = () => {
    axios.post("http://localhost:4000/login", user)
    .then(res => {
      alert(res.data.message)
      console.log(res.data.user)
      setLoginUser(res.data.user)
     navigate('/homepage')
   })
 }
}

Answer 1

You should replace :

<Route path="/login" element={<Login />} setLoginUser={setLoginUser}/>

by

<Route path="/login" element={<Login setLoginUser={setLoginUser}/>} />

I don't think it's a good idea to path variable like that in the root element but this should works.

Why do you have <BrowserRouter> and <Routes> ?