Hello everyone, I have this problem, when I fill out the form and click on the login button, it does not go to the homepage, it just says http://localhost:3000/homepage./
**App.js**
import React, { useState } from "react";
import Homepage from './Homepage';
import Authentication from "./authentication/Authentication";
function App() {
const [user, setUser] = useState(null);
return (
<div className="app">
{user ? <Homepage /> : <Authentication />}
</div>
);
}
export default App;
**Login.js**
import React, { useState } from "react";
import "./Authentication.css";
import { useNavigate } from "react-router-dom";
import firebase from "../firebase";
function Login() {
const navigate = useNavigate();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const submit = async (e) => {
e.preventDefault();
try {
const user = await firebase.auth().signInWithEmailAndPassword(email, password);
if (user) {
alert("Login Successfully");
navigate("/homepage");
}
} catch (error) {
alert(error);
}
}
return (
<div>
<form action="">
<h2>Login</h2>
<input
autoFocus
type="email"
name="email"
id="emailID"
placeholder="E-mail"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
name="password"
id="passwordID"
placeholder="Password"
required
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<input onClick={submit} type="submit" value="Login" />
</form>
</div>
);
}
export default Login;
**Signup.js**
import React, { useState } from "react";
import "./Authentication.css";
import firebase from "../firebase";
function Signup() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const submit = async (e) => {
e.preventDefault();
try {
const user = await firebase.auth().createUserWithEmailAndPassword(email, password);
if (user) {
alert("Account created successfully");
}
} catch (error) {
alert(error)
}
};
return (
<div>
<form action="">
<h2>Signup</h2>
<input
autoFocus
type="text"
value={name}
name="name"
id="nameID"
placeholder="Name"
required
onChange={(e) => setName(e.target.value)}
/>
<input
type="email"
value={email}
name="email"
id="emailID"
placeholder="E-mail"
required
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
value={password}
name="password"
id="passwordID"
placeholder="Password"
required
onChange={(e) => setPassword(e.target.value)}
/>
<input onClick={submit} type="submit" value="Signup" />
</form>
</div>
);
}
export default Signup;
**Firebase.js**
// import { initializeApp } from "firebase/app";
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/database";
const firebaseConfig = {
apiKey: "AIzaSyBaqOv1N1HGRI1s9pxejGKRyWVVLd8QKZ8",
authDomain: "instagram-clone-71559.firebaseapp.com",
projectId: "instagram-clone-71559",
storageBucket: "instagram-clone-71559.appspot.com",
messagingSenderId: "790490588883",
appId: "1:790490588883:web:064e21f838f5bb14e21626"
};
const app = firebase.initializeApp(firebaseConfig);
export default app