react-router-dom含error参数的hash路由配置出现404错误求助

你的问题核心在于URL中#后的哈希片段不属于路由路径的一部分，createBrowserRouter只会匹配#之前的路径内容，你之前写的带参数的路由路径根本无法匹配到/psdReset这个基础路径，自然会触发404。

正确处理方案： #

1. 简化路由配置：只设置/psdReset基础路由，哈希里的参数交给组件内部处理
2. 解析哈希参数：在对应组件中读取#后的内容，判断参数类型后渲染对应逻辑

修改后的代码示例： #

首先更新路由配置：

import { Provider } from 'jotai'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import App from './App.tsx'
import Auth from './Auth.tsx'
import NewPass from './NewPass.tsx'
import ResetPassword from './ResetPassEmail.tsx'
import PsdResetHandler from './PsdResetHandler.tsx' // 新增哈希处理组件
import './index.css'

const router = createBrowserRouter([
  {
    path: "/",
    element: <Auth />,
  },
  {
    path: "/chatroom",
    element: <App />,
  },
  {
    path: "/psdResetEmail",
    element: <ResetPassword />,
  },
  {
    path: "/psdReset",
    element: <PsdResetHandler />, // 用该组件统一处理哈希参数
  },
]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Provider>
      <RouterProvider router={router} />
    </Provider>
  </React.StrictMode>
);

然后创建PsdResetHandler.tsx组件，负责解析哈希参数并分发逻辑：

import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import NewPass from './NewPass'
import Auth from './Auth'

// 把哈希参数解析成对象的工具函数
const parseHashParams = () => {
  const hashStr = window.location.hash.slice(1) // 去掉开头的#
  if (!hashStr) return {}
  return Object.fromEntries(new URLSearchParams(hashStr))
}

export default function PsdResetHandler() {
  const navigate = useNavigate()
  const [hashParams, setHashParams] = useState(parseHashParams())

  useEffect(() => {
    // 监听哈希变化，实时更新参数
    const handleHashChange = () => {
      setHashParams(parseHashParams())
    }
    window.addEventListener('hashchange', handleHashChange)
    return () => window.removeEventListener('hashchange', handleHashChange)
  }, [])

  useEffect(() => {
    // 无参数时跳转回邮箱重置页面
    if (!Object.keys(hashParams).length) {
      navigate('/psdResetEmail')
    }
  }, [hashParams, navigate])

  // 根据参数类型渲染对应组件
  if (hashParams.access_token) {
    return <NewPass tokenData={hashParams} />
  }
  if (hashParams.error) {
    return <Auth errorMsg={hashParams.error_description} />
  }

  return null // 或者加载中占位组件
}

关键说明： #

• 哈希片段是客户端专属内容，不会发送到服务器，所以路由只需要匹配/psdReset基础路径
• 用URLSearchParams可以快速解析哈希中的键值对，无需手动处理字符串分割
• 监听hashchange事件可以覆盖用户手动修改哈希的场景

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