在反应js中导航到另一个页面的问题

【问题标题】：problem in navigate to another page in react js在反应js中导航到另一个页面的问题
【发布时间】：2022-06-18 01:20:37
【问题描述】：

我正在尝试创建一个登录页面，当使用 ReactJS 单击Submit 按钮时导航到另一个页面。但我遇到了一些问题：

1. 看起来事件处理函数在页面加载时被立即调用，因为console.log('clicked') 在我做任何事情之前出现在开发者工具中

2. 当我实际点击Submit 按钮时，页面并没有改变。

这是我的代码（这里是CodeSandbox）：

// ./App.js
import { HashRouter as Router, Route, Routes } from "react-router-dom";
import Login from "./components/Login";
import Dashboard from "./components/Dashboard";

export default function App() {
  return (
    <Router>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <Routes>
          <Route path="/" element={<Login />} />
        </Routes>
        <Routes>
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </Router>
  );
}

// ./components/Login.js
import { Button } from "react-bootstrap";
import { useNavigate } from "react-router-dom";

const Login = () => {
  const navigate = useNavigate();

  const handleClick = (e) => {
    console.log("clicked");
    navigate("/dashboard");
  };

  return (
    <div>
      <form>
        <h2>The Login page</h2>
        <Button variant="primary" onClick={handleClick()}>
          Submit
        </Button>
      </form>
    </div>
  );
};

export default Login;

// ./components/Dashboard.js
import React from "react";

const Dashboard = () => {
  return (
    <div>
      <h2>This is the Dashboard page</h2>
    </div>
  );
};

export default Dashboard;

【问题讨论】：

• onClick 接受一个函数。试试onClick={handleClick}

标签： javascript reactjs