<p><strong>読みやすくするために一部のコードを削除しました</strong></p> <ブロック引用> <p>すべてが正しくインポートされ、正常に動作していますが、このエラーを解決できません<strong>このエラーが発生しましたが、チュートリアルを見ましたが、reactRouter Web サイトにも同じ方法がありますが、私にとっては機能しませんコード</strong></p> </blockquote> <p><strong>キーボードの Enter キーを押したときにルートを変更したい</strong></p> <ブロック引用> <p>これは app.js ファイルです</p> </blockquote> <pre class="brush:php;toolbar:false;">function App() { 戻る （ <div> <div key="ナビゲーションバー" className="ナビゲーションバー"> <ナビゲーションバー /> </div> <div key="検索ボックス" className="検索ボックス"> <SearchBar カードデータ={カード}/> </div> <div> <カード key="カード" Carddata={カード} /> </div> </div> ); } デフォルトのアプリをエクスポート;</pre> <ブロック引用> <p>これはすべてのルーティングが行われるファイルです。useNavigate がルートを変更すると、開きたいルート ('/SearchResult') が開くはずです</p> </blockquote> <pre class="brush:php;toolbar:false;">const Cards = ({carddata:cardComponent}) => { 戻る （ //これは、useNavigate がルートを "/SearchResult" に変更するときに開く必要があるファイルです <Route path="/SearchResult" element={<SearchResPage />}></Route> </ルート> <div className="右セクション"> <RightCard CardData={cardComponent} /> </div> </div> </ルーター> ); }; デフォルトのカードをエクスポート;</pre> <p><strong>これは useNavigate を使用してルートを変更するファイルです。開きたいファイルは searchResPage です (コードはこのコードの後に​​あります)</strong></p> <pre class="brush:php;toolbar:false;">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;</pre> をエクスポートします。 <ブロック引用> <p>または、ページを更新せずにEnterキーを押したときにルートを変更する他の方法はありますか?このオプションは見つかりましたが、なぜ機能しないのかわかりません</p> </blockquote><p><br /></p>