For now i have two components. What i want to do is that after a successful login i will redirect the user to a homepage. But when i am trying to do that its not happening . Although the routes are changing in the url but the previous component is not going and overlapping with the new component.
I have tried other ways too but no good. Any suggestion will be of great help
My Code:
JavaScript
x
106
106
1
import { useState, useEffect } from "react";
2
import Paper from "@mui/material/Paper";
3
import Grid from "@mui/material/Grid";
4
import Avatar from "@mui/material/Avatar";
5
import TextField from "@mui/material/TextField";
6
import Button from "@mui/material/Button";
7
import Typography from "@mui/material/Typography";
8
import FormControlLabel from "@mui/material/FormControlLabel";
9
import Checkbox from "@mui/material/Checkbox";
10
import { useNavigate, Route, Link, Routes } from "react-router-dom";
11
import Test from "../../test/Test";
12
export default function LoginForm() {
13
const [email, setEmail] = useState("");
14
const [password, setPassword] = useState("");
15
const navigate = useNavigate();
16
17
const checkLogin = async (event) => {
18
event.preventDefault();
19
try {
20
const response = await fetch(
21
"http://localhost:5000/api/v1/app/loginuser",
22
{
23
method: "POST",
24
headers: { "Content-Type": "application/json" },
25
body: JSON.stringify({
26
email: email,
27
password: password,
28
}),
29
}
30
);
31
const responseData = await response.json();
32
navigate('/api/v1/app/test');
33
console.log(responseData.data);
34
} catch (e) {
35
console.log(e);
36
}
37
};
38
39
return (
40
<Grid>
41
<Paper elevation={10}>
42
<Grid align="center">
43
<Avatar></Avatar>
44
<h2>Sign In</h2>
45
</Grid>
46
{/* Login Logic */}
47
48
<form onSubmit={checkLogin}>
49
<TextField
50
label="Email"
51
placeholder="Enter Email"
52
required
53
focused
54
value={email}
55
onChange={(e) => setEmail(e.target.value)}
56
sx={{ margin: 5 }}
57
/>
58
<TextField
59
label="Password"
60
placeholder="Enter password"
61
type="password"
62
required
63
focused
64
value={password}
65
onChange={(e) => setPassword(e.target.value)}
66
sx={{ margin: 5 }}
67
/>
68
{/* <FormControlLabel
69
control={<Checkbox name="checkedB" color="primary" />}
70
label="Remember me"
71
/> */}
72
<Button
73
type="submit"
74
color="primary"
75
variant="contained"
76
sx={{ margin: 5 }}
77
onClick={() => {}}
78
>
79
Sign in
80
</Button>
81
{/* <Typography>
82
<Link href="#">Forgot password ?</Link>
83
</Typography>
84
<Typography>
85
{" "}
86
Do you have an account ?<Link href="#">Sign Up</Link>
87
</Typography> */}
88
89
<Button
90
color="primary"
91
variant="contained"
92
onClick={() => {
93
navigate("/api/v1/app/test");
94
}}
95
>
96
Test link
97
</Button>
98
<Routes>
99
<Route path="/api/v1/app/test" exact element={<Test />} />
100
</Routes>
101
</form>
102
</Paper>
103
</Grid>
104
);
105
}
106
Advertisement
Answer
JavaScript
1
4
1
<Routes>
2
<Route path="/api/v1/app/test" exact element={<Test />} />
3
</Routes>
4
This code means “Render component if url is domain/api/v1/app/test”
So you need to wrap your conditional rendering logic with a parent component
example
Main.js:
JavaScript
1
5
1
<Routes>
2
<Route path="api/v1/app/userHome" exact element={<LoginPage />}>
3
<Route path="api/v1/app/test" exact element={<Test />}>
4
</Routes>
5
LoginPage.js:
JavaScript
1
59
59
1
<Grid>
2
<Paper elevation={10}>
3
<Grid align="center">
4
<Avatar></Avatar>
5
<h2>Sign In</h2>
6
</Grid>
7
{/* Login Logic */}
8
9
<form onSubmit={checkLogin}>
10
<TextField
11
label="Email"
12
placeholder="Enter Email"
13
required
14
focused
15
value={email}
16
onChange={(e) => setEmail(e.target.value)}
17
sx={{ margin: 5 }}
18
/>
19
<TextField
20
label="Password"
21
placeholder="Enter password"
22
type="password"
23
required
24
focused
25
value={password}
26
onChange={(e) => setPassword(e.target.value)}
27
sx={{ margin: 5 }}
28
/>
29
{/* <FormControlLabel
30
control={<Checkbox name="checkedB" color="primary" />}
31
label="Remember me"
32
/> */}
33
<Button
34
type="submit"
35
color="primary"
36
variant="contained"
37
sx={{ margin: 5 }}
38
onClick={() => {}}
39
>
40
Sign in
41
</Button>
42
{/* <Typography>
43
<Link href="#">Forgot password ?</Link>
44
</Typography>
45
<Typography>
46
{" "}
47
Do you have an account ?<Link href="#">Sign Up</Link>
48
</Typography> */}
49
50
<Button
51
color="primary"
52
variant="contained"
53
onClick={() => {
54
navigate("/api/v1/app/test");
55
}}
56
>
57
Test link
58
</Button>
59