<p>我創造了一個新的反應專案。我是新來反應的,我試圖在單擊文字後進行導航,但它給了我這個錯誤。 </p>
<blockquote>
<pre class="brush:php;toolbar:false;">Uncaught runtime errors:
×
ERROR
useNavigate() may be used only in the context of a <Router> component.
at invariant (http://localhost:3000/static/js/bundle.js:1123:11)
at useNavigateUnstable (http://localhost:3000/static/js/bundle.js:66522:102)
at useNavigate (http://localhost:3000/static/js/bundle.js:66519:46)
at App (http://localhost:3000/static/js/bundle.js:83:81)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:26618:22)
at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17)
at beginWork (http://localhost:3000/static/js/bundle.js:31200:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16210:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16254:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16311:35)
ERROR
useNavigate() may be used only in the context of a <Router> component.
at invariant (http://localhost:3000/static/js/bundle.js:1123:11)
at useNavigateUnstable (http://localhost:3000/static/js/bundle.js:66522:102)
at useNavigate (http://localhost:3000/static/js/bundle.js:66519:46)
at App (http://localhost:3000/static/js/bundle.js:83:81)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:26618:22)
at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17)
at beginWork (http://localhost:3000/static/js/bundle.js:31200:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16210:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16254:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16311:35)
ERROR
useNavigate() may be used only in the context of a <Router> component.
at invariant (http://localhost:3000/static/js/bundle.js:1123:11)
at useNavigateUnstable (http://localhost:3000/static/js/bundle.js:66522:102)
at useNavigate (http://localhost:3000/static/js/bundle.js:66519:46)
at App (http://localhost:3000/static/js/bundle.js:83:81)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:26618:22)
at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17)
at beginWork (http://localhost:3000/static/js/bundle.js:31200:20)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:36163:18)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:35432:16)
at 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”匯入註冊;
從 'react-router-dom' 導入 { BrowserRouter as Router, Routes, Route, Link, useNavigate };
函數應用程式(){
常量導航 = useNavigate();
const handleSignUpClick = () =>; {
導航('/註冊');
}
返回 (
<路由器>
<a className=“nav-link active” aria-current=“頁” href=“#” onClick={handleSignUpClick}>
報名
</a>
</h3>
<路線>
<路由路徑=“/” element={} />;
<路由路徑=“/signup”元素={<註冊/>} />
</路線>
</路由器>
);
}
導出預設應用程式;</pre>
<p>這是LoginForm.js的程式碼:</p>
從 'react' 匯入 React, { useState };
從 'reactstrap' 匯入 { 按鈕、表單、FormGroup、標籤、輸入、InputGroup };
從 'react-icons/fa' 導入 { FaEye, FaEyeSlash };
函數登入表單(){
const [用戶名,setUsername] = useState('');
const [密碼,setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const handleSubmit = (事件) =>; {
//處理提交
}
consttoggleShowPassword = () =>; {
setShowPassword(!showPassword);
}
返回 (
<表單onSubmit={handleSubmit}>
<表單組>
<標籤=「使用者名稱」>使用者名稱標籤>
<輸入類型=“文字” name="用戶名" id="用戶名" value={使用者名稱} onChange={e =>; setUsername(e.target.value)} //>
</表單組>
<表單組>
<用於=「密碼」的標籤>密碼標籤>
<輸入群組>
<輸入類型={showPassword ? '文本' : '密碼'} name=“密碼” id=“密碼” value={password} onChange={e =>; setPassword(e.target.value)} //>
<按鈕onClick={toggleShowPassword}>
{顯示密碼 ?
> :
}
</按鈕>
</輸入組>
</表單組>
<按鈕>提交按鈕>
</表格>
;
);
}
匯出預設登入表單;</pre>
<p>這是signup.js的程式碼:</p>
import './App.css';
函數註冊(){
返回 (
<h1>應用</h1>
);
}
匯出預設註冊;</pre></p>
useNavigate
鉤子無法在路由器提供的路由上下文之外使用,例如在本例中為BrowserRouter
。您可以將BrowserRouter
提升到ReactTree中的更高位置來解決這個問題,但是有一個更簡單的解決方案,只需將原始錨標記轉換為RRD連結