React JS の <Router> コンポーネントのコンテキストでのみ useNavigate() でキャッチされないエラーが発生する

Question

読みやすくするために一部のコードを削除しました

<ブロック引用>

すべてが正しくインポートされ、正常に動作していますが、このエラーを解決できませんこのエラーが発生しましたが、チュートリアルを見ましたが、reactRouter Web サイトにも同じ方法がありますが、私にとっては機能しませんコード

キーボードの Enter キーを押したときにルートを変更したい

<ブロック引用>

これは app.js ファイルです

function App() {
       
  戻る （
    <div>
        <div key="ナビゲーションバー" className="ナビゲーションバー">
            <ナビゲーションバー />
        </div>
        <div key="検索ボックス" className="検索ボックス">
            <SearchBar カードデータ={カード}/>
        </div>
        <div>
            <カード key="カード" Carddata={カード} />
        </div>
    </div>
  );
}

デフォルトのアプリをエクスポート;

<ブロック引用>

これはすべてのルーティングが行われるファイルです。useNavigate がルートを変更すると、開きたいルート ('/SearchResult') が開くはずです

const Cards = ({carddata:cardComponent}) => {
  戻る （
//これは、useNavigate がルートを "/SearchResult" に変更するときに開く必要があるファイルです
          <Route path="/SearchResult" element={<SearchResPage />}></Route>
        </ルート>

        <div className="右セクション">
          <RightCard CardData={cardComponent} />
        </div>
      </div>
    </ルーター>
  );
};
デフォルトのカードをエクスポート;

これは useNavigate を使用してルートを変更するファイルです。開きたいファイルは searchResPage です (コードはこのコードの後に​​あります)

import { useNavigate } from "react-router-dom";

const SearchBar = ({カードデータ}) => {
  const navigate=useNavigate();

  //これはonKeyDownによって呼び出される関数です
関数 searchResult(e) {
    
    if (e.key === "Enter") {
      if (e.target.value === "") return;
        // ルーティングを変更するために使用されます
          ナビゲート('/検索結果')

        // props から渡された結果をフィルタリングして表示するために使用されます
        Carddata.filter((結果) => {
          if (`${result.Heading}`.toLowerCase().match(e.target.value)) {
              console.log(結果)
            }
      });
    }
  }

  戻る （
    <div className="flex">
      <input onKeyDown={searchResult} type="text" ></input>
    </div>
  );
};

デフォルトの SearchBar;

をエクスポートします。 <ブロック引用>

または、ページを更新せずにEnterキーを押したときにルートを変更する他の方法はありますか?このオプションは見つかりましたが、なぜ機能しないのかわかりません

Answer 1

このエラーは、Router の外部で useNavigate フックを使用しようとしていることを意味します。 最も一般的なのは、BrowserRouter などの react-router-dom パッケージ内にあり、次に Routes コンポーネントと Route コンポーネントがあります。

は次のようになります (ルーターはアプリ内にあることも、index.js などの別のファイルに存在することもできます):

リーリー

これでコンポーネントは正常に動作するはずです。