反应按钮 onClick答案

【问题标题】：React button onClick反应按钮 onClick
【发布时间】：2021-11-12 19:28:23
【问题描述】：

[使用 const history 后出错]

我无法使用历史钩子，即使我按照互联网上提到的相同步骤进行操作。非常感谢一些帮助

import React, { Component } from 'react'

import LoginScreen from './LoginScreen'

import './MyStyles.css'


import { useHistory } from "react-router-dom"

function Home() {
    
   const history = useHistory();
  
    return (
            <div>

                <html>
                    <head>
                        <title>CSS Website Layout</title>
                    </head>
                    <body>
                        <div class="topnav">
                            <button>Home</button> &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
                            <button>Blog</button> &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
                            <button>Merchandise</button> &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
                            <button>About us</button>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
                            <button style={{float: 'right'}} onclick={()=> history.push("/LoginScreen")}>Sign Up!</button>
                        </div>

我得到的错误是

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

【问题讨论】：

添加您的最小代码，以便我们提供帮助
是的，我已经添加了
'./LoginScreen' 以及
你在你的应用程序中安装了 react-router-dom 吗？执行这个命令来安装它：npm install --save react-router-dom
请发布您的package.json。

标签： reactjs react-hooks react-router

【解决方案1】：

首先，您使用的是 onclick 而不是 onClick。使用 html 时 onclick 可以，但使用 react 时使用 onClick。

并且不使用内联函数，而是创建一个名为 handleClick 的单独函数，然后在单击后调用此函数。

更多参考请查看此链接 - React Router Dom

【讨论】：

【解决方案2】：

问题是你忘记在history前面写const这个词了

【讨论】：

使用 Const 后，我收到此错误，“错误：无效的挂钩调用。挂钩只能在函数组件的主体内部调用。这可能由于以下原因之一发生：1 . 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能在同一个应用程序中有多个 React 副本请参阅reactjs.org/link/invalid-hook-call 以获取有关如何操作的提示来调试和修复这个问题。”
有时热加载器无法正常工作，您更新代码后是否刷新页面？
这个错误提示你需要更新你的 React 但要小心更新它会影响你的整个项目