我正在使用React.js开发登录表单。一旦用户输入了正确的凭据，它就应该导航到 Jmeter 板页面。下面是我的登录组件。

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import './login.css';
import { redirect } from "react-router-dom";
const LoginForm = () => {
    document.body.style = 'background:#20c997';
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    localStorage.setItem("authenticated",false);
    const navigate = useNavigate();
    const permEmail = "piyush@gmail.com";
    const permPass = "pass";

    const handleEmail = (e) => {
        setEmail(e.target.value);
    }
    const handlePassword = (e) => {
        setPassword(e.target.value);
    }

    const handleSubmit = (e)=>{
        e.preventDefault();
        console.log(localStorage.getItem("authenticated"));
        if(email===permEmail && password===permPass){
            localStorage.setItem("authenticated",true);
            navigate("/dashboard");
        }else{
            window.alert("Wrong credentials");
        }
    }
    return (
        <>
            <div className="p-5">
                <div className="container text-start w-25 bg-light text-dark h-50 p-5 border border-primary border-2 rounded">
                    <form>
                        <div className="mb-3">
                            <label for="exampleFormControlInput1" className="form-label">Email address</label>
                            <input
                                type="email"
                                className="form-control border border-primary border-1"
                                id="exampleFormControlInput1"
                                placeholder="name@example.com"
                                onChange={(e) => handleEmail(e)}
                            />
                        </div>
                        <div className="mb-3">
                            <label htmlFor="exampleFormControlInput2" className="form-label">Password</label>
                            <input
                                type="password"
                                className="form-control border border-primary border-1"
                                id="exampleFormControlInput2"
                                placeholder="password"
                                onChange={(e) => handlePassword(e)}
                            />
                        </div>
                        <button 
                        type="submit" 
                        className="btn btn-outline-primary border-1 mt-2"
                        onClick={e=>handleSubmit(e)}
                        >Submit</button>
                    </form>

                </div>
            </div>
        </>

    )
}

export default LoginForm;

字符串
在上面的代码中，我使用localStorage来更新密钥。以下是 Jmeter 板组件代码：

import React, { useState, useEffect } from "react";
import { Navigate } from "react-router-dom";

const Dashboard = () => {
    document.body.style = 'background:white';
    const [authenticated, setAuthenticated] = useState(null);
    useEffect(() => {
        setData();
    }, [])
    function setData() {
        const loggedInUser = localStorage.getItem("authenticated");
        console.log(loggedInUser);
        setAuthenticated(loggedInUser);
        console.log(authenticated);
    }
    console.log(authenticated);
    if (!authenticated) {
        return <Navigate replace to="/login" />;
    }
    else {
        return (
            <>
                <h1>Hello world</h1>
            </>
        );
    }
}

export default Dashboard;

型
在上面的 Jmeter 板代码中，我正在检查localStorage中的身份验证密钥是否为true，如果是，则应该返回新的HTML代码'' Hello World'，如果不是，则应该重定向到登录页面。但是，即使经过身份验证的密钥是真的，我也无法获得“Hello World” Jmeter 板。我被困在这里了请帮我拿这个。