useNavigate 无法使用按钮单击（“将循环结构转换为 JSON”错误）

Question

我正在尝试使用 GitHub 上的 electron-react 样板创建桌面应用程序，目前，我正在尝试为我打算用于该应用程序的多个页面创建路由。我查看了如何操作，发现我可以使用

useNavigate()

、

onClick

作为按钮，以及

Routes

、

Router

和

Route

来自 React。但是，它不起作用。

我尝试嵌套

Route

组件，以便主页附加欢迎页面，单击按钮时可以用登录页面替换，但这没有用。然后，我尝试列出

Route

组件，但也没有用。我尝试查找有关此问题的其他帖子，但没有任何帮助。我还尝试将

useNavigate

导入切换为源自

react-router

而不是

react-router-dom

，但这也不起作用。

这是我到目前为止一直在使用的代码：

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

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

// grid background with overlaying gradient
function Background() {
  return (
    <div id = "background">
      <img className = "prevent-select prevent-drag absolute" id = "perspective-grid" src={perspective_grid}></img>
    </div>
  )
}

// welcome page (with login and signup buttons)
function Welcome() {

  let navigate = useNavigate('/login')
  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>

      <button className = "btn prevent-drag" id = "login" onClick={navigate}>log in</button>
      <button className = "btn prevent-drag" id = "signup">sign up</button>

    </div>
  )
}

// login page
function Login() {
  return (
    <div id = "LOGIN">testtesttest</div>
  )
}

// signup page
function Signup() {
  return (
    <div id = "SIGNUP"></div>
  )
}

// full routing for the above pages.
export default function App() {
  return (
    <Router>
      
      <Routes>
        <Route path="/" element={<>
          <TitleBar />
          <Background />
          <Welcome />
        </>} />
        <Route path="login" element={<Login />} />  

      </Routes>
    </Router>
  )
}

这是我遇到的错误（在我点击“登录”按钮后）：

任何帮助将不胜感激——这是我第一次在 React 中使用路由，我希望能够让它工作，这样我就可以取得更多进步。

Answer 1

更新：我今天早些时候能够让它工作！下面是更新后的代码。我使用了

const navigate = useNavigate()

，在函数内部调用了navigate，

handleClick()

，它被用作登录按钮的

onClick

属性。然后，我列出了路线（没有嵌套）。

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

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

// grid background with overlaying gradient
function Background() {
  return (
    <div id = "background">
      <img className = "prevent-select prevent-drag absolute" id = "perspective-grid" src={perspective_grid}></img>
    </div>
  )
}

// welcome page (with login and signup buttons)
function Welcome() {
  const navigate = useNavigate();
  function handleClick() {
    navigate("/login");
  }

  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>

      <button className = "btn prevent-drag" id = "login" onClick={handleClick}>log in</button>
      <button className = "btn prevent-drag" id = "signup">sign up</button>
    </div>
  )
}

// login page
function Login() {
  const navigate = useNavigate();
  function handleClick() {
    navigate("/");
  }

  return (
    <div id = "LOGIN">
      <button className = "btn prevent-drag" id = "signup" onClick={handleClick}>go back</button>
    </div>
  )
}

// signup page
function Signup() {
  return (
    <div id = "SIGNUP"></div>
  )
}

// full routing for the above pages.
export default function App() {
  return (
    <>
      <TitleBar />
      <Background />
      <Router>
        <Routes>

          <Route path="/" element={<Welcome />} />
          <Route path="/login" element={<Login />} />  

        </Routes>
      </Router>
    </>
  )
}