React: Cannot load the page onClick of button. Loads up a question mark instead

Question

For some unknown reason, I cannot seem to access the next page in my program, and it displays this weird question mark after the localhost instead instead.

App.js:

import './App.css';
import Login from './Login.js';
import CommentsForm from './CommentsForm.js';
import ThankYouForm from './ThankYouForm.js';
import { Route, Routes, Router, Navigate, BrowserRoutes, Switch, Redirect, BrowserRouter } from 'react-router-dom';
import React, { useState } from "react";


function App() {
  const [comments, setComments] = useState(); //store the comments
  //routing the application to three pages: A Login page, A Comments form, and Thank you form
  //Phone Number: 6474579858
  return (
    <div>
      <BrowserRouter>
      <Routes>
      
        <Route path = '/' element={<Login/>} />
        <Route path= '/login' element={<Login/>} />
        <Route path= '/comment' element={<CommentsForm/>} />
        <Route path='/thanks' element={<ThankYouForm/>} />
        

        </Routes>
      </BrowserRouter>
      
    </div>
  );
}

export default App;

login.js:

import React, { useState } from 'react';
import { Navigate, useNavigate} from 'react-router-dom';
import CommentsForm from './CommentsForm.js';


export function Login() { 
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
  
    function handleSubmit(){
      
      const navigate = useNavigate;

      navigate('/comment');
    };
  
    return (
      
      <form onSubmit={handleSubmit}>

        
        <div>
         
 
  
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
        </div>
        <div>
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            id="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
        </div>
        <button onClick={<CommentsForm/>} >Login</button>
      </form>
    );
  };
  
  export default Login;

I know all of these pages load up, but the only problem is actually loading the page. What ends up happening is that the page seems to load but it instead shows a 'http://localhost:3000/?' instead. When checking the errors on the site itself, it says there is no proper onClick command, even tho I added one in. Hope I get an answer to this problem soon.

Answer 1

There are some issues in your code, let's address them together:

1. Since you already have set up an onSubmit event handler function in your form element, the onClick handler can be removed.

2. You forgot to call the event.preventDefault() in your handleSubmit handler, and that triggers the page to reload once the button is clicked

3. useNavigate is a React Hook, and can only be called at the Top Level(see Rules of Hooks), not inside a function. Also, you need to call it instead of just assigning it.

Here is the working code for your Login.js component:

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

export function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  function handleSubmit(event) {
    event.preventDefault();
    navigate('/comment');
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
      </div>
      <button>Login</button>
    </form>
  );
}

export default Login;