我无法在 MERN Stack 中使用 History.push() 重新连接

Question

我希望你一切都好。 我正在尝试使用 MERN Stack 来完成电子邮件身份验证系统。 然后，单击验证电子邮件后，用户必须处于活动状态，并且页面必须重定向到登录页面。 但在数据库中，用户已激活，但页面未重定向到登录名。 请帮我！！！ 这是验证页面网址： http://localhost:3000/verify?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNjViYmM0ZThiOTFkMmM1ZGZjYWRlMDRhIn0sImlhdCI6MTcwNjgwNDQ1NiwiZXhwIjoxNzA3MTY0N DU2fQ.ChVbabAuRholRHaeNFI-TUimMXfXn8zWczHTYiykVUU

这是我的代码

// VerificationPage.js

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import axios from 'axios';

const VerificationPage = () => {
  const queryParameters = new URLSearchParams(window.location.search)
  const token = queryParameters.get("token")
  const history = useHistory();

  useEffect(() => {

    //Verify the Email
    const verifyUser = async () => {
      try {

        const response = await axios.get(`/api/verify/${token}`)
        console.log(response.ok);

        if (response.ok) {
          history.push('/login');
        } else {
          history.push('/register');
        }
      } catch (error) {
        console.error('Error verifying user:', error);
        // Handle error (redirect to an error page or display a message)
      }
    };

    verifyUser();
  }, [token, history]);

  return (
    <div>
      <p>Verifying your account...</p>
      {/* You can add a loader or other UI elements here */}
    </div>
  );
};

export default VerificationPage;

这是后端。

//verify.js
const express = require('express');
const router = express.Router();
const path = require('path');
const User = require('../../models/User');

router.get('/:token', async (req, res) => {
  const token = req.params.token;

  try {
    const user = await User.findOne({ verificationToken: token });

    if (!user) {
      return res.status(404).json({ message: 'User not found' });
    }

    user.isVerified = true;
    user.verificationToken = undefined;
    await user.save();
    
    // Redirect to the login page
    res.redirect('/login');
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Internal server error' });
  }
});

module.exports = router;

Answer 1

而不是

useHistory

尝试使用

useNavigate()

useHistory

现已弃用。

import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

const VerificationPage = () => {
  const queryParameters = new URLSearchParams(window.location.search)
  const token = queryParameters.get("token")
  const navigate = useNavigate ();

  useEffect(() => {

    //Verify the Email
    const verifyUser = async () => {
      try {

        const response = await axios.get(`/api/verify/${token}`)
        console.log(response.ok);

        if (response.ok) {
          navigate('/login');
        } else {
          navigate('/register');
        }
      } catch (error) {
        console.error('Error verifying user:', error);
        // Handle error (redirect to an error page or display a message)
      }
    };

    verifyUser();
  }, [token, navigate]);

  return (
    <div>
      <p>Verifying your account...</p>
      {/* You can add a loader or other UI elements here */}
    </div>
  );
};

export default VerificationPage;