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:
import { useState, useEffect } from "react"; import Paper from "@mui/material/Paper"; import Grid from "@mui/material/Grid"; import Avatar from "@mui/material/Avatar"; import TextField from "@mui/material/TextField"; import Button from "@mui/material/Button"; import Typography from "@mui/material/Typography"; import FormControlLabel from "@mui/material/FormControlLabel"; import Checkbox from "@mui/material/Checkbox"; import { useNavigate, Route, Link, Routes } from "react-router-dom"; import Test from "../../test/Test"; export default function LoginForm() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const navigate = useNavigate(); const checkLogin = async (event) => { event.preventDefault(); try { const response = await fetch( "http://localhost:5000/api/v1/app/loginuser", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: email, password: password, }), } ); const responseData = await response.json(); navigate('/api/v1/app/test'); console.log(responseData.data); } catch (e) { console.log(e); } }; return ( <Grid> <Paper elevation={10}> <Grid align="center"> <Avatar></Avatar> <h2>Sign In</h2> </Grid> {/* Login Logic */} <form onSubmit={checkLogin}> <TextField label="Email" placeholder="Enter Email" required focused value={email} onChange={(e) => setEmail(e.target.value)} sx={{ margin: 5 }} /> <TextField label="Password" placeholder="Enter password" type="password" required focused value={password} onChange={(e) => setPassword(e.target.value)} sx={{ margin: 5 }} /> {/* <FormControlLabel control={<Checkbox name="checkedB" color="primary" />} label="Remember me" /> */} <Button type="submit" color="primary" variant="contained" sx={{ margin: 5 }} onClick={() => {}} > Sign in </Button> {/* <Typography> <Link href="#">Forgot password ?</Link> </Typography> <Typography> {" "} Do you have an account ?<Link href="#">Sign Up</Link> </Typography> */} <Button color="primary" variant="contained" onClick={() => { navigate("/api/v1/app/test"); }} > Test link </Button> <Routes> <Route path="/api/v1/app/test" exact element={<Test />} /> </Routes> </form> </Paper> </Grid> ); }
Advertisement
Answer
<Routes> <Route path="/api/v1/app/test" exact element={<Test />} /> </Routes>
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:
<Routes> <Route path="api/v1/app/userHome" exact element={<LoginPage />}> <Route path="api/v1/app/test" exact element={<Test />}> </Routes>
LoginPage.js:
<Grid> <Paper elevation={10}> <Grid align="center"> <Avatar></Avatar> <h2>Sign In</h2> </Grid> {/* Login Logic */} <form onSubmit={checkLogin}> <TextField label="Email" placeholder="Enter Email" required focused value={email} onChange={(e) => setEmail(e.target.value)} sx={{ margin: 5 }} /> <TextField label="Password" placeholder="Enter password" type="password" required focused value={password} onChange={(e) => setPassword(e.target.value)} sx={{ margin: 5 }} /> {/* <FormControlLabel control={<Checkbox name="checkedB" color="primary" />} label="Remember me" /> */} <Button type="submit" color="primary" variant="contained" sx={{ margin: 5 }} onClick={() => {}} > Sign in </Button> {/* <Typography> <Link href="#">Forgot password ?</Link> </Typography> <Typography> {" "} Do you have an account ?<Link href="#">Sign Up</Link> </Typography> */} <Button color="primary" variant="contained" onClick={() => { navigate("/api/v1/app/test"); }} > Test link </Button>