捕捉されないランタイム エラー: useNavigate() は <Router> コンポーネントのコンテキストでのみ使用できます

Question

<p>新しい反応プロジェクトを作成しました。私は反応するのが初めてで、テキストをクリックした後にナビゲートしようとしていますが、このエラーが発生します。 </p> <ブロック引用> <pre class="brush:php;toolbar:false;">捕捉されなかったランタイム エラー: × エラー useNavigate() は、<Router> コンポーネントのコンテキストでのみ使用できます。 不変時 (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() は、<Router> コンポーネントのコンテキストでのみ使用できます。 不変時 (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() は、<Router> コンポーネントのコンテキストでのみ使用できます。 不変時 (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)</pre> </blockquote> <p>この問題に対する解決策が見つかりません。 </p> <p>これらはファイル内で使用したコードです。app.js代番号：</p> <pre class="brush:php;toolbar:false;">'./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 = () => { ナビゲート('/サインアップ'); } 戻る （ <ルーター> <div className="ログイン">

<a className="ナビゲーションリンクがアクティブ" aria-current="ページ" href="#" onClick={handleSignUpClick}> サインアップ </a> </h3> <ルート> <ルートパス="/" element={<ログインフォーム />} /> <ルートパス="/signup" element={<サインアップ />} /> </ルート> </div> </ルーター> ); } デフォルトのアプリをエクスポート;</pre> <p>これは LoginForm.js の代番号：</p> <pre class="brush:php;toolbar:false;">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); } 戻る （ <div className="フォームボックス"> <フォーム onSubmit={handleSubmit}> <フォームグループ> <Label for="username">Username</Label> <入力タイプ="テキスト"名前= "ユーザー名" id="ユーザー名" value={ユーザー名} onChange={e => setUsername(e.target.value)} /> </フォームグループ> <フォームグループ> <="パスワード"のラベル>パスワード</ラベル> <入力グループ> <入力タイプ={showPassword ? 'テキスト' : 'パスワード'} name="パスワード" id="パスワード"値={パスワード} onChange={e => setPassword(e.target.value)} /> <ボタン onClick={toggleShowPassword}> {パスワードを表示 ? <ファアイスラッシュ /> : <FaEye />} </ボタン> </InputGroup> </フォームグループ> <div className="text-center"> <ボタン>送信</ボタン> </div> </フォーム> </div> ); } デフォルトのログインフォームをエクスポート;</pre> <p>これはsignup.jsの代コード：</p> <pre class="brush:php;toolbar:false;">import './App.css'; 関数 SignUp() { 戻る （ <div className="ログイン"> <h1>アプリケーション</h1> </div> ); } デフォルトのサインアップをエクスポート;</pre></p>

Answer 1

useNavigate フックは、ルーターによって提供されるルーティング コンテキスト (この場合は BrowserRouter など) の外部では使用できません。この問題を解決するには、BrowserRouter を ReactTree の上位の位置に 移動することができますが、もっと簡単な解決策があります。元のアンカー タグを RRD Link に変換するだけです。 リーリー リーリー