React Hook "useRouter" 在 function "article" 中被調用，它既不是 React function 組件也不是自定義 React Hook ZC1C425268E68385D1AB5074C17A94F1

Question

我的文件名是 index.js，它在pages/article/[id]/index.js內，我無法使用 useRouter function。 這是代碼。

import {useRouter} from "next/router";
import React, {Fragment} from 'react';

function article(props) {
    const router = useRouter();
    const {id} = router.query;
    return (
        <Fragment>
             <h4>This is an Article {id}</h4>
        </Fragment>
    );
}

export default article;

我使用 Webstorm 作為我的 IDE 在 IDE 中顯示錯誤
錯誤是：- ESLint: React Hook "useRouter" is called in function "article" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".(react-hooks/rules-of-hooks) ESLint: React Hook "useRouter" is called in function "article" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".(react-hooks/rules-of-hooks) ESLint: React Hook "useRouter" is called in function "article" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".(react-hooks/rules-of-hooks)即使我的應用程序運行良好。\為什么會顯示這個 ESLint 錯誤？ 我的網站仍然按預期工作
這是我的 IDE 的屏幕截圖

Answer 1

這是一個 linting 錯誤。 ESLint 為 React.js 設置的襯里規則說你必須用 PascalCase(Upper Camel Case) 寫你的組件名稱。 在這種情況下，您只需將article更改為Article ，ESLint 將不再返回錯誤。