如何在 React 中使用条件进行路由

Question

我正在处理一个 React 项目，首先我必须注册，然后我将注册详细信息存储在本地存储中，所以当我在输入电子邮件和密码后进入登录屏幕时，当我点击提交按钮时，它必须检查电子邮件和本地存储的密码。因此，如果两者相同，那么它应该重定向到另一个页面，我正在尝试执行此操作，但它显示了一些错误，因此请有人帮助我解决此错误

这是我的代码

这是 Signup.js

import React, { useState, useRef } from 'react';
import './Signup.css';

const Signup = () => {

    const [data, sendData] = useState({})

    const handleChange = ({ target }) => {
        const { name, value } = target
        const newData = Object.assign({}, data, { [name]: value })
        sendData(newData)
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        localStorage.setItem('userInfo', JSON.stringify(data))
    }

    const myForm = useRef(null)
    const resetForm = () => {
        myForm.current.reset();
        }

    return (
        <div className='container'>
            <div className='row justify-content-center'>
                <div className='col-4'>
                    <div className='registerForm'>
                        <form onSubmit={handleSubmit} ref={myForm}>
                            <div className="form-group mb-2">
                                <label htmlFor="firstname">Firstname</label>
                                <input type="text" className="form-control" onChange={handleChange} name='firstname' id="firstname" placeholder="Enter firstname"></input>
                            </div>
                            <div className="form-group mb-2">
                                <label htmlFor="lastname">Lastname</label>
                                <input type="text" className="form-control" onChange={handleChange} name='lastname' id="lastname" placeholder="Enter lastname"></input>
                            </div>
                            <div className="form-group mb-2">
                                <label htmlFor="email">Email</label>
                                <input type="email" className="form-control" onChange={handleChange} name='email' id="email" placeholder="Enter email"></input>
                            </div>
                            <div className="form-group mb-2">
                                <label htmlFor="password">Password</label>
                                <input type="password" className="form-control" onChange={handleChange} name='password' id="password" placeholder="Enter password"></input>
                            </div>
                            <button onClick={resetForm} type="submit" className="btn btn-primary mt-3">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Signup

这是 Login.js

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';
import './Login.css';

const Login = () => {

    let history = useHistory();



    if (login.email && login.password === signupCredentials.email && signupCredentials.password) {
        var redirect = () => {
            history.push('/dashboard')
        }
    }

    const [login, setLogin] = useState({})

    const handleChange = ({ target }) => {
        const { name, value } = target
        const newData = Object.assign({}, login, { [name]: value })
        setLogin(newData)
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        console.log(login)
    }

    const signupCredentials = JSON.parse(localStorage.getItem('userInfo'))

    console.log(signupCredentials.email && signupCredentials.password)

    return (
        <div className='container'>
            <div className='row justify-content-center'>
                <div className='col-4'>
                    <form onSubmit={handleSubmit}>
                        <div className="form-group mb-2">
                            <label htmlFor="exampleInputEmail1">Email address</label>
                            <input type="email" className="form-control" onChange={handleChange} name='email' id="exampleInputEmail1" placeholder="Enter email"></input>
                        </div>
                        <div className="form-group mb-2">
                            <label htmlFor="exampleInputPassword1">Password</label>
                            <input type="password" className="form-control" onChange={handleChange} name='password' id="exampleInputPassword1" placeholder="Password"></input>
                        </div>
                        <button type="submit" onClick={redirect} className="btn btn-primary mt-3">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    )
}

export default Login

如果您有任何问题，请告诉我