[英]Component is not rendering even after routing | React JS | React Router v6
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.
尽管 url 中的路线正在发生变化,但以前的组件不会与新组件重叠。 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>
);
}
<Routes>
<Route path="/api/v1/app/test" exact element={<Test />} />
</Routes>
This code means "Render component if url is domain/api/v1/app/test"此代码表示“如果 url 是 domain/api/v1/app/test,则渲染组件”
So you need to wrap your conditional rendering logic with a parent component所以你需要用父组件包装你的条件渲染逻辑
example例子
Main.js:主.js:
<Routes>
<Route path="api/v1/app/userHome" exact element={<LoginPage />}>
<Route path="api/v1/app/test exact element={<Test />}>
</Routes>
LoginPage.js:登录页面.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.