收到与反应挂钩 useHistory 相关的错误

Posted 2023-02-22

【中文标题】收到与反应挂钩 useHistory 相关的错误

【英文标题】：getting an error related to react hook useHistory

【发布时间】：2021-02-03 07:20:56

【问题描述】：

我已经实现了 useHistory()，就像我在下面实现的一样，以前我没有收到任何错误，但是在这个组件中我收到了一个错误

第 6:18 行：在函数“showPost”中调用 React Hook “useHistory”，该函数既不是 React 函数组件也不是自定义 React Hook 函数 react-hooks/rules-of-hooks

import React from 'react';
import CloseIcon from '@material-ui/icons/Close';
import useHistory from 'react-router-dom';

const showPost = () =>
    let history = useHistory();

    const closeUpload = () =>
        history.goBack();
    

    return(
        <div className="overlay">
            <div className="overlay-container">
                <button className="close-btn" onClick = closeUpload><CloseIcon color="action"/></button>
                <h1>Hello</h1>
            </div>
        </div>
    );


export default showPost;

请帮我解决这个问题。 提前谢谢你。

【问题讨论】：

美好的一天。你使用的是什么版本的 React 和 React Router？您需要 React 16.8+ 和 React Router 5.1 到 6.0（useHistory() 在 5.1 之前或 6.0 之后不起作用）。

【参考方案1】：

你应该总是用大写字母来调用你的 React 组件。

统一更新： 来自https://reactjs.org/docs/components-and-props.html#rendering-a-component

注意：组件名称始终以大写字母开头。 React 将以小写字母开头的组件视为 DOM 标签。例如，表示一个 HTML div 标签，但表示一个组件，并且需要 Welcome 在范围内。

【参考方案2】：

https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components

只需大写组件

const showPost 

到

const ShowPost 

做好事

export default showPost 

到

export default ShowPost