React JS：渲染空白页面，而不是在路线中渲染组件

Question

在React JS App中，有忘记密码功能，如果DB中存在用户的电子邮件，则在输入电子邮件时，最终用户将获得密码重置链接。当用户单击电子邮件中的链接时，它将被重定向并加载空白屏幕。我无法解决问题，我已经检查了所有路线，看起来很完美。

这是ResetPassword组件，用户可以在其中输入设置其新密码。

const ResetPassword = (props) => {
    const userId = props.match.params.id
    const [password,setPassword] = useState({
        password: '', confirmPassword: ''
    })
    const baseUrl = process.env.REACT_APP_baseUrl
    const changePassUrl = `${baseUrl}/user/reset/${userId}`
    const history = useHistory()

    const resetPassword = async e => {
        e.preventDefault()
        const options = {
            method: 'PATCH',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(password)
        }
        await fetch(changePassUrl, options)
        .then(response => response.json())
        .then(user => {
            console.log('Success:', user);
            if(user.status===true){
                toast.success('Password changed Successfully. Login with New Password',{position: 'top-center', autoClose: 8000})
                history.push('/login')
            }
            else if(user.status === false){
                toast.error('Please try again!',{position: 'top-center', autoClose: 8000})
            }
        })
        .catch((error) => {
            console.error('Error:', error);
        });
    }

上述组件的App.js路由。

 <Route exact path='/reset/:id' component={ResetPassword}/>

通过NodeMailer发送重置链接的Node API。

module.exports.resetUserPassword  = (req, res) => {
    User.findOne({email: req.body.email},
        (err, users) => {
            if (err) {
                res.status(500).json({
                    status: false,
                    message: 'some error occured in Finding User.',
                    error: err,
                });
            }
            if (users) {
                const url = process.env.Url
                var transporter = nodemailer.createTransport({
                    host: process.env.mailHost,
                    port: 587,
                    auth: {
                      user: process.env.mailUser,
                      pass: process.env.mailPass
                    }
                  });
                  
                  var mailOptions = {
                    from: process.env.mailUser,
                    to: users.email,
                    subject: 'Password Reset Link',
                    html: `
                    <div style='color: #000'>
                    <h2>Hello ${users.fullName},</h2>
                    <h3>A request has been received to change the password for your Jobs@MyCityMyStore Account.</h3>
                    <h3>Click <a href="${url}/reset/${users._id}">here</a> to reset your password</h3>
                    <p>If you did not initiate this request, Please contact us immediately at </p><a href='#'>support@support.com</a><br/>
                    <p>Thank you.</p>
                    <p>support@support Team</p>
                    </div>`
                  };
                  
                  transporter.sendMail(mailOptions, function(error, info){
                    if (error) {
                      console.log(error);
                    } else {
                      console.log('Email sent: ' + info.response);
                    }
                });
                res.status(200).json({ status: true, email: users.email });
            }else{
                res.status(200).json({status: false, data: 'User not found '+users})
            }
        }
    );
};