React Router (Version 6.0.2) makes page unresponsive ReactJS
When I use the new navigate
function in ReactJS React Router DOM it makes the page unresponsive. I think there is an error in my code because when I add the navigate
react-router-dom function to a button like () => navigate('home')
it works. But, when I add it in useEffect
it doesn't work, the page becomes unresponsive.
Please check my code if there are any errors because I do not know a lot about this.
import React, { useEffect, useState } from 'react';
import './App.css';
import {
BrowserRouter as Router,
Routes,
Route,
Link,
Navigate,
useNavigate
} from "react-router-dom";
import Home from './Pages/Home';
import Login from './Pages/Login';
import {
getAuth,
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
onAuthStateChanged
} from "firebase/auth";
import {auth} from './Config';
function App() {
const [authenticated, setAuthenticated] = useState(false);
const navigate = useNavigate();
useEffect(() => {
onAuthStateChanged(auth, (user) => {
if (user) {
setAuthenticated(true);
navigate('home') // doesn't work
} else {
setAuthenticated(false);
}
})
})
const signup = (email, pass) => {
createUserWithEmailAndPassword(auth, email, pass)
.then((userCredential) => {
const user = userCredential.user;
console.log(user)
navigate('home')
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorMessage)
});
}
const login = (email, pass) => {
signInWithEmailAndPassword(auth, email, pass)
.then((credentials) => {
console.log(credentials.user);
})
.catch((error) => {
console.log(error.message);
})
}
return (
<Routes>
<Route path='/' element={<button className="primary-button" onClick={() => navigate('home')}>Home</button>} /> // this works
<Route path="/home" element={<Home authenticated={authenticated} />}></Route>
<Route path="/auth" element={<Login signup={signup} login={login} />}></Route>
</Routes>
);
}
function AppWrapper() {
return (
<Router>
<App />
</Router>
)
}
export default AppWrapper;
from Recent Questions - Stack Overflow https://ift.tt/3paJWNF
https://ift.tt/eA8V8J
Comments
Post a Comment