Блог

На данный момент у меня есть два компонента. Что я хочу сделать, так это то, что после успешного входа в систему я перенаправлю пользователя на домашнюю страницу. Но когда я пытаюсь это сделать, этого не происходит . Хотя маршруты меняются в URL, но предыдущий компонент не собирается и перекрывается с новым компонентом. Я пробовал и другие способы, но безрезультатно. Любое предложение будет очень полезно

Мой Код:

 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) =gt; {  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 (  lt;Gridgt;  lt;Paper elevation={10}gt;  lt;Grid align="center"gt;  lt;Avatargt;lt;/Avatargt;  lt;h2gt;Sign Inlt;/h2gt;  lt;/Gridgt;  {/* Login Logic */}   lt;form onSubmit={checkLogin}gt;  lt;TextField  label="Email"  placeholder="Enter Email"  required  focused  value={email}  onChange={(e) =gt; setEmail(e.target.value)}  sx={{ margin: 5 }}  /gt;  lt;TextField  label="Password"  placeholder="Enter password"  type="password"  required  focused  value={password}  onChange={(e) =gt; setPassword(e.target.value)}  sx={{ margin: 5 }}  /gt;  {/* lt;FormControlLabel  control={lt;Checkbox name="checkedB" color="primary" /gt;}  label="Remember me"  /gt; */}  lt;Button  type="submit"  color="primary"  variant="contained"  sx={{ margin: 5 }}  onClick={() =gt; {}}  gt;  Sign in  lt;/Buttongt;  {/* lt;Typographygt;  lt;Link href="#"gt;Forgot password ?lt;/Linkgt;  lt;/Typographygt;  lt;Typographygt;  {" "}  Do you have an account ?lt;Link href="#"gt;Sign Uplt;/Linkgt;  lt;/Typographygt; */}   lt;Button  color="primary"  variant="contained"  onClick={() =gt; {  navigate("/api/v1/app/test");  }}  gt;  Test link  lt;/Buttongt;  lt;Routesgt;  lt;Route path="/api/v1/app/test" exact element={lt;Test /gt;} /gt;  lt;/Routesgt;  lt;/formgt;  lt;/Papergt;  lt;/Gridgt;  ); }  

 lt;Routesgt;  lt;Route path="/api/v1/app/test" exact element={lt;Test /gt;} /gt;  lt;/Routesgt;  

Этот код означает «Компонент рендеринга, если URL-адрес домена/api/v1/приложения/теста».

Поэтому вам нужно обернуть свою логику условного рендеринга родительским компонентом

пример

Main.js:

 lt;Routesgt; lt;Route path="api/v1/app/userHome" exact element={lt;LoginPage /gt;}gt; lt;Route path="api/v1/app/test" exact element={lt;Test /gt;}gt; lt;/Routesgt;  

LoginPage.js:

 lt;Gridgt;  lt;Paper elevation={10}gt;  lt;Grid align="center"gt;  lt;Avatargt;lt;/Avatargt;  lt;h2gt;Sign Inlt;/h2gt;  lt;/Gridgt;  {/* Login Logic */}   lt;form onSubmit={checkLogin}gt;  lt;TextField  label="Email"  placeholder="Enter Email"  required  focused  value={email}  onChange={(e) =gt; setEmail(e.target.value)}  sx={{ margin: 5 }}  /gt;  lt;TextField  label="Password"  placeholder="Enter password"  type="password"  required  focused  value={password}  onChange={(e) =gt; setPassword(e.target.value)}  sx={{ margin: 5 }}  /gt;  {/* lt;FormControlLabel  control={lt;Checkbox name="checkedB" color="primary" /gt;}  label="Remember me"  /gt; */}  lt;Button  type="submit"  color="primary"  variant="contained"  sx={{ margin: 5 }}  onClick={() =gt; {}}  gt;  Sign in  lt;/Buttongt;  {/* lt;Typographygt;  lt;Link href="#"gt;Forgot password ?lt;/Linkgt;  lt;/Typographygt;  lt;Typographygt;  {" "}  Do you have an account ?lt;Link href="#"gt;Sign Uplt;/Linkgt;  lt;/Typographygt; */}   lt;Button  color="primary"  variant="contained"  onClick={() =gt; {  navigate("/api/v1/app/test");  }}  gt;  Test link  lt;/Buttongt;