Next.js中如何跳转至其他页面并显示提示消息

根据你的需求，下面分Next.js两种路由模式给出具体实现步骤：

一、修改表单提交后的跳转逻辑 #

1. Pages Router（Next.js 12及更早，或pages目录下的页面） #

首先在表单组件中引入路由工具：

import { useRouter } from 'next/router';

初始化路由实例：

const router = useRouter();

替换原Axios回调中的alert，改为携带消息跳转：

const response = await axios({
  method: "post",
  url: "https://diggdevelopment.com/blackstallion_new/api/testinfo_new/",
  data: formData,
  headers: { "Content-Type": "multipart/form-data" },
}).then(function (response) {
  router.push({
    pathname: '/allblogs', // 确保路径与你的Allblogs.js页面对应
    query: { success: 'Your form submitting successfully' }
  });
}).catch(function (error) {
  alert('response is ' + error);
});

2. App Router（Next.js 13+，app目录下的页面） #

在表单组件中引入新版路由工具：

import { useRouter } from 'next/navigation';

初始化路由实例：

const router = useRouter();

修改Axios回调：

const response = await axios({
  method: "post",
  url: "https://diggdevelopment.com/blackstallion_new/api/testinfo_new/",
  data: formData,
  headers: { "Content-Type": "multipart/form-data" },
}).then(function (response) {
  const successMsg = encodeURIComponent('Your form submitting successfully');
  router.push(`/allblogs?success=${successMsg}`);
}).catch(function (error) {
  alert('response is ' + error);
});

二、在Allblogs.js页面显示提示消息 #

对应Pages Router的Allblogs.js #

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function Allblogs() {
  const router = useRouter();
  const { success } = router.query;

  // 可选：3秒后自动清除提示并移除URL参数
  useEffect(() => {
    if (success) {
      setTimeout(() => {
        router.replace('/allblogs');
      }, 3000);
    }
  }, [router, success]);

  return (
    <div>
      {success && (
        <div style={{ padding: '1rem', background: '#d4edda', color: '#155724', borderRadius: '4px' }}>
          {success}
        </div>
      )}
      {/* 页面原有内容 */}
    </div>
  );
}

对应App Router的Allblogs.js #

注意添加'use client'指令以使用客户端hooks：

'use client';
import { useSearchParams, useRouter } from 'next/navigation';
import { useEffect } from 'react';

export default function Allblogs() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const success = searchParams.get('success');

  // 可选：3秒后自动清除提示并移除URL参数
  useEffect(() => {
    if (success) {
      setTimeout(() => {
        const params = new URLSearchParams(searchParams);
        params.delete('success');
        router.push(`/allblogs?${params.toString()}`, { scroll: false });
      }, 3000);
    }
  }, [searchParams, router, success]);

  return (
    <div>
      {success && (
        <div style={{ padding: '1rem', background: '#d4edda', color: '#155724', borderRadius: '4px' }}>
          {decodeURIComponent(success)}
        </div>
      )}
      {/* 页面原有内容 */}
    </div>
  );
}

备选方案：用localStorage传递消息（无URL参数） #

如果不想通过URL暴露消息，可改用localStorage：

表单提交时修改： #

.then(function (response) {
  localStorage.setItem('formSuccessMsg', 'Your form submitting successfully');
  router.push('/allblogs');
})

Allblogs.js页面实现： #

import { useEffect, useState } from 'react';

export default function Allblogs() {
  const [successMsg, setSuccessMsg] = useState('');

  useEffect(() => {
    const msg = localStorage.getItem('formSuccessMsg');
    if (msg) {
      setSuccessMsg(msg);
      localStorage.removeItem('formSuccessMsg'); // 读取后立即清除
      setTimeout(() => setSuccessMsg(''), 3000); // 3秒后隐藏提示
    }
  }, []);

  return (
    <div>
      {successMsg && (
        <div style={{ padding: '1rem', background: '#d4edda', color: '#155724', borderRadius: '4px' }}>
          {successMsg}
        </div>
      )}
      {/* 页面原有内容 */}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Rick