React 18+React Router 6访问路由出现TypeError: cyclic object value错误

应用代码 #

HTML 文件 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="/src/assets/vite.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Vite + React + TS</title>
</head>
<body>
<div id="root" class="h-screen bg-gray-100 w-full"></div>

<script type="module">
    import RefreshRuntime from 'http://localhost:5001/@@react-refresh'
    RefreshRuntime.injectIntoGlobalHook(window)
    window.$RefreshReg$ = () => {}
    window.$RefreshSig$ = () => (type) => type
    window.__vite_plugin_react_preamble_installed__ = true
</script>
<script type="module" src="http://localhost:5001/src/main.tsx"></script>
</body>
</html>

Main.tsx 文件 #

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './site.css'
import { HashRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>
)

App.tsx 文件 #

import { Route, Routes } from 'react-router-dom'

function App() {
  return (
    <div>
      <Routes>
        <Route path="/some-route/*" element={<div>123</div>}></Route>
      </Routes>
    </div>
  )
}

export default App

报错信息 #

访问路由 /some-route 时，控制台抛出以下错误：

TypeError: cyclic object value
    parseData https://localhost:7274/#/some-route:8
    i https://localhost:7274/#/some-route:10
    i https://localhost:7274/#/some-route:10
    _ https://localhost:7274/#/some-route:10
    _ https://localhost:7274/#/some-route:10
    l https://localhost:7274/#/some-route:10
    emit https://localhost:7274/#/some-route:439
    emit https://localhost:7274/#/some-route:439
    attachRenderer https://localhost:7274/#/some-route:15681
    initBackend https://localhost:7274/#/some-route:15693
    initBackend https://localhost:7274/#/some-route:15692
    activateBackend https://localhost:7274/#/some-route:736
    setup https://localhost:7274/#/some-route:670
    emit https://localhost:7274/#/some-route:439
    emit https://localhost:7274/#/some-route:439
    setup https://localhost:7274/#/some-route:16180
    <anonymous> https://localhost:7274/#/some-route:16167
    __webpack_require__ https://localhost:7274/#/some-route:20
    <anonymous> https://localhost:7274/#/some-route:84
    <anonymous> https://localhost:7274/#/some-route:87

问题分析与解决方法 #

这个错误多由React DevTools 序列化循环引用对象触发，结合你的路由配置，可尝试以下方案：

• 移除不必要的路由通配符：如果 /some-route 没有子路由需求，把路径从 /some-route/* 改为 /some-route。无意义的通配符可能导致路由状态出现循环引用，触发序列化报错。
• 临时关闭 React DevTools：关闭浏览器的 React DevTools 扩展后重试，若错误消失，说明是 DevTools 在处理路由状态时的兼容性问题，可等待扩展更新或调整路由配置。
• 重启开发服务器：Vite 的热刷新脚本可能与路由状态存在临时冲突，重启服务器后再访问路由观察是否恢复正常。

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