ReactJS点击按钮跳转页面异常及路由匹配警告问题排查

三个问题由两处代码写法错误导致，按下面的方式修改即可全部解决：

事件绑定错误导致自动触发、点击无响应 #

• 你在按钮上写的onClick={handleClick()}属于立即调用函数的写法：组件渲染到这个按钮的时候就会直接执行handleClick，不需要等点击事件触发，这就是页面一加载就打印clicked日志的原因。这种写法相当于把handleClick的执行返回值（这里是undefined）绑定给点击事件，真正点击按钮的时候根本没有可执行的处理逻辑，自然不会跳转。
• 另外你的提交按钮放在<form>标签内部，按钮默认触发表单原生提交行为，会刷新页面，就算触发了跳转逻辑也会被页面刷新打断。

修复方法：

• 给onClick传递函数本身的引用，不要加括号调用：写成onClick={handleClick}即可，如果需要传递自定义参数，可以包裹一层箭头函数：onClick={(e) => handleClick(e, 自定义参数)}
• 在handleClick函数开头加e.preventDefault()，阻止表单默认的提交刷新行为。

路由拆分错误导致匹配警告 #

React Router v6 中，每个独立的<Routes>组件都会单独基于当前访问路径做路由匹配，匹配不到内部配置的路由时就会抛出警告。你把/和/dashboard两个路由拆分到了两个独立的<Routes>标签里，访问/dashboard时，第一个只配置了/路径的<Routes>找不到匹配项，就会抛出你看到的No routes matched location "/"警告。

修复方法：把所有路由配置都放到同一个<Routes>组件内统一管理即可。

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组件内 */}
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </Router>
  );
}

Login.js #

import { Button } from "react-bootstrap";
import { useNavigate } from "react-router-dom";

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

  const handleClick = (e) => {
    // 阻止表单默认提交刷新行为
    e.preventDefault();
    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;

Dashboard.js #

import React from "react";

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

export default Dashboard;

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