Next.js路由问题：如何快速将哈希路由重定向至非哈希路由

云上老周

2026-4-28

我来帮你搞定这个哈希路由重定向的问题！你之前遇到的两种方案失效或有闪烁的核心原因，是URL中的#哈希部分是浏览器端专属的内容，不会发送到服务器——所以next.config.js的服务端重定向规则抓不到它，而useEffect是React组件挂载后才执行，自然会先加载页面再跳转。下面给你两个更优的解决方案，从根源上解决闪烁问题：

最优方案：在`_document.tsx`中注入预渲染脚本

这个方法能让重定向逻辑在React初始化之前就执行，完全避免页面闪烁。如果你的项目里还没有自定义_document.tsx，就在pages目录下新建一个，然后加入这段代码：

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* 这段脚本会在页面HTML加载后立刻执行，早于React初始化 */}
          <script
            dangerouslySetInnerHTML={{
              __html: `
                (function() {
                  const hash = window.location.hash;
                  // 匹配以#/开头的旧哈希路由
                  if (hash && hash.startsWith('#/')) {
                    // 去掉#号，拿到目标路由
                    const targetRoute = hash.slice(1);
                    // 用replaceState替换历史，避免留下旧路由的记录
                    window.location.replace(targetRoute);
                  }
                })();
              `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

为什么这个方案好用？

这段内联脚本会在页面刚加载HTML的阶段就运行，比React的任何组件初始化都早，用户完全看不到旧页面的内容，直接就跳转到新路由了。而且用window.location.replace替代直接修改href，还能避免在浏览器历史记录里留下带#旧路由的痕迹，用户点返回时不会回到旧链接。

备选方案：Pages Router下用`_app.tsx`的`getInitialProps`（适配旧项目）

如果你还在使用Next.js的Pages Router，也可以在_app.tsx里结合getInitialProps来提前执行逻辑（不过还是不如上面的脚本高效，但比单纯的useEffect好）：

import type { AppProps } from 'next/app'
import { useRouter } from 'next/router'
import { useEffect } from 'react'

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter()

  useEffect(() => {
    const hash = window.location.hash
    if (hash.startsWith('#/')) {
      const targetRoute = hash.slice(1)
      // 用replace而不是push，避免历史记录冗余
      router.replace(targetRoute)
    }
  }, [router])

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

// 让getInitialProps确保页面初始化前先完成逻辑准备
MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext)
  return { ...appProps }
}

export default MyApp

额外适配：带查询参数的哈希路由

如果你的旧路由还带查询参数（比如/#/contact?id=123），可以修改脚本里的路由拼接逻辑，把查询参数也带上：

const targetRoute = hash.slice(1) + window.location.search;

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

Next.js路由问题：如何快速将哈希路由重定向至非哈希路由

最优方案：在_document.tsx中注入预渲染脚本 #

为什么这个方案好用？ #

备选方案：Pages Router下用_app.tsx的getInitialProps（适配旧项目） #

额外适配：带查询参数的哈希路由 #

最优方案：在`_document.tsx`中注入预渲染脚本

为什么这个方案好用？

备选方案：Pages Router下用`_app.tsx`的`getInitialProps`（适配旧项目）

额外适配：带查询参数的哈希路由