Next JS中含哈希值URL的重定向实现问题

首先明确：URL中的#（锚点/片段标识符）是浏览器本地处理的内容，不会发送到服务器，所以你之前在next.config.js里尝试的两种重定向配置（直接匹配带#的路径、正则匹配）都无法生效——因为服务器根本接收不到#后面的部分。

要实现这个需求，必须在客户端层面处理，以下是具体方案：

客户端路由检查重定向 #

在_app.js（或_app.tsx）中，利用Next.js的路由钩子和浏览器的location.hash来检测锚点并执行重定向：

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

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    // 当路由路径变化时检查锚点
    const currentHash = window.location.hash;
    if (router.pathname === '/contact' && currentHash === '#support') {
      // 用replace进行重定向，避免浏览器历史记录保留原链接
      router.replace('/contact-us/support');
    }
  }, [router.pathname]);

  return <Component {...pageProps} />;
}

扩展场景 #

如果需要处理多个带锚点的重定向规则，可以用映射表简化逻辑：

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

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();
  // 定义锚点重定向规则：[原路径+锚点] -> 目标路径
  const redirectRules = [
    { fromPath: '/contact', fromHash: '#support', to: '/contact-us/support' },
    // 可以添加更多规则
    { fromPath: '/about', fromHash: '#team', to: '/about-us/our-team' },
  ];

  useEffect(() => {
    const currentHash = window.location.hash;
    const matchRule = redirectRules.find(
      rule => rule.fromPath === router.pathname && rule.fromHash === currentHash
    );
    if (matchRule) {
      router.replace(matchRule.to);
    }
  }, [router.pathname]);

  return <Component {...pageProps} />;
}

注意事项 #

• 该方案依赖客户端JavaScript，若用户禁用JS则无法生效，但绝大多数场景下无需担心这个问题。
• 无论是SSR、SSG还是静态导出的Next.js应用，这个客户端逻辑都能正常工作。

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