reactjs - React Native Hook の問題 - エラー: フック呼び出しが無効です。フックは、関数コンポーネントの本体内でのみ呼び出すことができます

Question

import { useParams } from 'react-router-dom';
import useFetch from './useFetch';

const BlogDetails = () => {
    const { id } = useParams();
    const { data: blog, error, isPending } = useFetch('http://localhost:3001/blogs/' + id);

    return (
        <div className="blog-details">
            { isPending && <div>...Loading...</div>}
            { error && <div>{error}</div>}
            { blog && (
                <article>
                    <h2>{blog.title}</h2>
                    <p>Written by {blog.author}</p>
                    <div>{blog.body}</div>
                </article>
            )}
        </div>
    );
}

export default BlogDetails;

import {useState, useEffect} from 'react';

const useFetch = (url) => {
        const [data, setData] = useState(null);
        const [isPending, setIsPending] = useState(true);
        const [error, setError] = useState(null);

    useEffect(() => {
        const abortCont = new AbortController();

        fetch(url, { signal: abortCont.signal })
            .then(res => {
                if(!res.ok){
                    throw Error('404 - data not found!');
                } 
                return res.json();
            })
            .then(data => {
                setData(data);
                setIsPending(false);
                setError(null);
            })
            .catch(err => {
                if (err.name === 'AbortError') {
                    console.log('fetch aborted');
                } else {
                    setIsPending(false);
                    setError(err.message);
                }
            })

            return () => abortCont.abort();
    }, [url]);

    return {data, isPending, error}
}

export default useFetch;

私は反応するのがかなり初めてで、VSCodeでパッケージを検索、追加、および削除するのに約2日を費やしましたが、役に立ちませんでした。

私は Youtube で Net Ninja の最近のチュートリアルに従っていますが、ステップ 25 で行き詰っています。( https://www.youtube.com/watch?v=t7VmF4WsLCo&t=4s )

コードを正確にコピーしましたが、問題は React の別の場所にあるようです。

誰かが私を助けたり、正しい方向に向けたりすることができれば、それは大歓迎です。

これは、ページにアクセスしようとするたびに発生するエラーです。メインページにないページのいずれかに対してスローされます。