[解決済み】react-router-domのuseHistory()を正しく使用する方法は？

質問

使用方法 useHistory() を正しく理解できますか？リアクトコンポーネントから別のリアクトコンポーネントへの遷移ができないのですが。 ReactのドキュメントやStack Overflowの説明によると、App.jsからMyComponent.jsに移行することができないようです。

例えば、私は次のようなことを試しています。

/* **App.js ** */
/* Import modules */
import React from 'react';
import { useHistory } from 'react-router-dom'; // version 5.2.0

function App()
{
    let history = useHistory ();
    const handleClick = () => {
       history.push ('./pages/MyComponent');
    }    

    return (
       <div className="App">
          <button onClick={handleClick}>Next page ==></button>
       </div>
    );
}

この例もテストしてみましたが、ボタンが押されると出力は以下のエラーを投げます。

TypeError: 未定義のプロパティ 'push' を読み取ることができません。

何かが漏れているように見えるのですが、バベル側のミスでしょうか？

プロジェクトのリアクト構造。

+ Root/
    + src/
        - App.js
        - index.js
        + pages/
            - MyComponent.js
    

解決方法は？

を使用することはできません。 useHistory フックを使用して、別のページにリダイレクトすることができます。 React Routerを使うには、アプリケーションを適切に設定する必要があります。この例を見てください。 https://reactrouter.com/web/example/basic

でアプリケーション全体を包む必要があります。 <BrowserRouter /> これは、フックを通して探している履歴オブジェクトを与えるものです。

ところで、引数として history.push への相対的なファイルパスを与えてはいけません。 <Route /> コンポーネント