新しい反応プロジェクトを作成しました。私は反応するのが初めてで、テキストをクリックした後にナビゲートしようとしていますが、このエラーが発生します。

捕捉されなかったランタイム エラー: × エラー useNavigate() は、 コンポーネントのコンテキストでのみ使用できます。 不変時 (http://localhost:3000/static/js/bundle.js:1123:11) useNavigateUnstable (http://localhost:3000/static/js/bundle.js:66522:102) で useNavigate で (http://localhost:3000/static/js/bundle.js:66519:46) アプリで (http://localhost:3000/static/js/bundle.js:83:81) renderWithHooks (http://localhost:3000/static/js/bundle.js:26618:22) で mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17) で beginWork で (http://localhost:3000/static/js/bundle.js:31200:20) HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16210:18) で Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16254:20) で invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16311:35) で エラー useNavigate() は、 コンポーネントのコンテキストでのみ使用できます。 不変時 (http://localhost:3000/static/js/bundle.js:1123:11) useNavigateUnstable (http://localhost:3000/static/js/bundle.js:66522:102) で useNavigate で (http://localhost:3000/static/js/bundle.js:66519:46) アプリで (http://localhost:3000/static/js/bundle.js:83:81) renderWithHooks (http://localhost:3000/static/js/bundle.js:26618:22) で mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17) で beginWork で (http://localhost:3000/static/js/bundle.js:31200:20) HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16210:18) で Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16254:20) で invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16311:35) で エラー useNavigate() は、 コンポーネントのコンテキストでのみ使用できます。 不変時 (http://localhost:3000/static/js/bundle.js:1123:11) useNavigateUnstable (http://localhost:3000/static/js/bundle.js:66522:102) で useNavigate で (http://localhost:3000/static/js/bundle.js:66519:46) アプリで (http://localhost:3000/static/js/bundle.js:83:81) renderWithHooks (http://localhost:3000/static/js/bundle.js:26618:22) で mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17) で beginWork で (http://localhost:3000/static/js/bundle.js:31200:20) beginWork$1 (http://localhost:3000/static/js/bundle.js:36163:18) PerformUnitOfWork (http://localhost:3000/static/js/bundle.js:35432:16) で workLoopSync (http://localhost:3000/static/js/bundle.js:35355:9)

この問題に対する解決策が見つかりません。

これらはファイル内で使用したコードです。app.js代番号：

'./logo.svg' からロゴをインポートします; './App.css' をインポートします。 './components/LoginForm' から LoginForm をインポートします。 「./signup」からサインアップをインポートします。 import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom'; 関数 App() { const navigate = useNavigate(); const handleSignUpClick = () => { ナビゲート('/サインアップ'); } 戻る （
      <ルーター>
       

       
 サインアップ  
        <ルート>
         <ルートパス="/" element={<ログインフォーム />} /> <ルートパス="/signup" element={<サインアップ />} />  
  ); } デフォルトのアプリをエクスポート;

これは LoginForm.js の代番号：

import React, { useState } from 'react'; import { Button、Form、FormGroup、Label、Input、InputGroup } from 'reactstrap'; import { FaEye, FaEyeSlash } から 'react-icons/fa'; 関数ログインフォーム() { const [ユーザー名, setユーザー名] = useState(''); const [パスワード, setPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); const handleSubmit = (イベント) => { //送信を処理します } const toggleShowPassword = () => { setShowPassword(!showPassword); } 戻る （ 
 <フォーム onSubmit={handleSubmit}> <フォームグループ> Username <入力タイプ="テキスト"名前= "ユーザー名" id="ユーザー名" value={ユーザー名} onChange={e => setUsername(e.target.value)} />  <フォームグループ> <="パスワード"のラベル>パスワード <入力グループ> <入力タイプ={showPassword ? 'テキスト' : 'パスワード'} name="パスワード" id="パスワード"値={パスワード} onChange={e => setPassword(e.target.value)} /> <ボタン onClick={toggleShowPassword}> {パスワードを表示 ? <ファアイスラッシュ /> : }    
 <ボタン>送信 
  
 ); } デフォルトのログインフォームをエクスポート;

これはsignup.jsの代コード：

import './App.css'; 関数 SignUp() { 戻る （ 
 
アプリケーション
 
 ); } デフォルトのサインアップをエクスポート;