React useNavigate点击按钮失效，报循环结构转JSON错误

核心问题分析 #

你的代码存在三个关键错误导致路由功能失效：

1. useNavigate 钩子使用方式错误：你直接调用 useNavigate('/login') 赋值给变量，不符合钩子规范——useNavigate 应先调用获取导航函数，再在事件中传入路径执行跳转。
2. useNavigate 导入来源错误：该钩子属于 react-router-dom 包，而非 react-router，导入错误会导致导航函数无法正常工作。
3. 路由结构设计问题：当前登录页未复用 TitleBar 和 Background 组件，若需保持页面布局一致性，需调整路由结构。

修正后的完整代码 #

import * as React from 'react';
import { MemoryRouter as Router, Routes, Route, useNavigate } from 'react-router-dom'

import TitleBar from './COMPONENTS/title_bar.js'
import perspective_grid from '../../assets/images/perspective_grid.jpg'
import './App.css'
import './CSS/Home.css'

// 网格背景组件
function Background() {
  return (
    <div id="background">
      <img className="prevent-select prevent-drag absolute" id="perspective-grid" src={perspective_grid}></img>
    </div>
  )
}

// 欢迎页组件
function Welcome() {
  // 正确获取navigate函数
  const navigate = useNavigate();

  return (
    <div id="welcome">
      <h1 className="prevent-select title">WTBDSB</h1>
      <p  id="subtitle"><i><b>w</b>ants <b>t</b>o <b>b</b>e <b>d</b>esmos <b>s</b>o <b>b</b>ad</i></p>

      {/* 点击事件中调用navigate并传入路径 */}
      <button className="btn prevent-drag" id="login" onClick={() => navigate('/login')}>log in</button>
      <button className="btn prevent-drag" id="signup" onClick={() => navigate('/signup')}>sign up</button>
    </div>
  )
}

// 登录页组件
function Login() {
  return (
    <div id="LOGIN">testtesttest</div>
  )
}

// 注册页组件
function Signup() {
  return (
    <div id="SIGNUP"></div>
  )
}

// 公共布局组件（复用TitleBar和Background）
function Layout({ children }) {
  return (
    <>
      <TitleBar />
      <Background />
      {children}
    </>
  )
}

// 主应用路由配置
export default function App() {
  return (
    <Router>
      <Routes>
        {/* 使用Layout包裹所有页面，保持布局一致 */}
        <Route path="/" element={<Layout><Welcome /></Layout>} />
        <Route path="/login" element={<Layout><Login /></Layout>} />
        <Route path="/signup" element={<Layout><Signup /></Layout>} />
      </Routes>
    </Router>
  )
}

关键修正说明 #

• useNavigate 正确用法：先通过 const navigate = useNavigate() 获取导航函数，再在按钮的 onClick 事件中用箭头函数调用 navigate('/login')，确保点击时才执行导航操作。
• 统一导入来源：将 useNavigate 从 react-router-dom 导入，和其他路由组件保持一致。
• 优化路由结构：新增 Layout 组件封装公共的 TitleBar 和 Background，所有页面路由都使用该布局包裹，避免重复代码并保持页面风格统一。

内容的提问来源于stack exchange，提问作者Gift G.