React按钮点击无法跳转页面，地址栏显示问号问题求助

问题根源分析 #

你的代码存在三个核心问题，直接导致跳转失效和控制台报错：

1. 按钮onClick属性写法错误
   登录按钮的onClick={<CommentsForm/>}完全不符合React事件处理规范——onClick需要接收一个函数，而你直接传入了组件实例。同时，form内的按钮默认类型为submit，会触发表单默认提交行为，这就是地址栏出现/?的原因。

2. useNavigate钩子调用错误
   const navigate = useNavigate;没有调用钩子函数，正确写法应该是执行useNavigate()来获取导航方法。

3. 未阻止表单默认提交行为
   handleSubmit函数没有阻止表单的默认提交事件，即便修复导航逻辑，页面仍会因默认提交刷新，导致跳转失效。

修正后的Login.js代码 #

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

export function Login() { 
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    // 正确调用useNavigate钩子
    const navigate = useNavigate();
  
    function handleSubmit(e){
      // 阻止表单默认提交，避免页面刷新
      e.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>
        {/* 移除错误的onClick配置，按钮设为submit类型触发表单提交逻辑 */}
        <button type="submit">Login</button>
      </form>
    );
  };
  
  export default Login;

App.js冗余代码优化 #

你的App.js导入了很多未使用的react-router-dom组件，可以精简为：

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

function App() {
  const [comments, setComments] = useState();

  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;

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