收到与 react hook useHistory 相关的错误

Question

我已经实现了 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;

请帮我解决这个问题。先感谢您。

Answer 1

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

UPD： 来自https://reactjs.org/docs/components-and-props.html#rendering-a-component

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