useNavigate not working with button click ("Converting circular structure to JSON" error)

Question

I'm trying to create a desktop app using the electron-react boilerplate on GitHub and at the moment, I'm trying to create routes for the multiple pages I intend to use for the app. I looked up how to do so, and I saw that I could use useNavigate(), onClick for the button, and Routes, Router, and Route from React. However, it isn't working.

I've attempted nesting the Route components so that the home page has the welcome page appended to it, which could get replaced with the login page on the button click, but that didn't work. Then, I tried listing the Route components instead, and that didn't work either. I tried looking up other posts about this issue, but nothing they had helped. I also tried switching out the useNavigate import to originate from react-router instead of react-router-dom, but that didn't work either.

Here is the code I've been working with so far:

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>
  )
}

And here is the error I'm getting (after I'm clicking the "log in" button):

Any help would be really appreciated - this is my first time working with Routes in React, and I'd love to be able to get this working so I can make more progress.

Answer 1

Update: I was able to get it working earlier today! Below's the updated code. I used const navigate = useNavigate(), called navigate inside of a function, handleClick(), which was used as the onClick attribute for the login button. Then, I listed the routes (no nesting).

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>
    </>
  )
}