即使在路由之后，組件也不會呈現 | 反應 JS | 反應路由器 v6

Question

現在我有兩個組件。 我想要做的是，在成功登錄后，我會將用戶重定向到主頁。 但是當我試圖這樣做時，它並沒有發生。 盡管 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) => {
    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>
  );
}

Answer 1

<Routes>
        <Route path="/api/v1/app/test" exact element={<Test />} />
      </Routes>

此代碼表示“如果 url 是 domain/api/v1/app/test，則渲染組件”

所以你需要用父組件包裝你的條件渲染邏輯

例子

主.js：

<Routes>
<Route path="api/v1/app/userHome" exact element={<LoginPage />}>
<Route path="api/v1/app/test exact element={<Test />}>
</Routes>

登錄頁面.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>