收到與 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 在范圍內。

Answer 2

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

只需將組件大寫

const showPost 

到

const ShowPost 

為

export default showPost 

到

export default ShowPost