我創造了一個新的反應專案。我是新來反應的,我試圖在單擊文字後進行導航,但它給了我這個錯誤。
Uncaught runtime errors: × ERROR useNavigate() may be used only in the context of acomponent. 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 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 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)
我無法找到此問題的任何解決方案。
這些是我在文件中使用的程式碼。app.js程式碼:
從 './logo.svg' 匯入標誌; 導入'./App.css'; 從 './components/LoginForm' 導入 LoginForm; 從“./signup”匯入註冊; 從 'react-router-dom' 導入 { BrowserRouter as Router, Routes, Route, Link, useNavigate }; 函數應用程式(){ 常量導航 = useNavigate(); const handleSignUpClick = () =>; { 導航('/註冊'); } 返回 ( <路由器>路由器> ); } 導出預設應用程式;報名
<路線> <路由路徑=“/” element={} />; <路由路徑=“/signup”元素={ <註冊>註冊>} /> 路線>
這是LoginForm.js的程式碼:
從 '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}> {顯示密碼 ?; ); } 匯出預設登入表單;> : } 按鈕> 輸入組> 表單組> <按鈕> 提交 按鈕>表格> 按鈕onclick={toggleshowpassword}> 輸入類型={showpassword> 輸入群組> 用於=「密碼」的標籤> 輸入類型=“文字”> 表單onsubmit={handlesubmit}>
這是signup.js的程式碼:
import './App.css'; 函數註冊(){ 返回 (); } 匯出預設註冊;應用
useNavigate
鉤子無法在路由器提供的路由上下文之外使用,例如在本例中為BrowserRouter
。您可以將BrowserRouter
提升到ReactTree中的更高位置來解決這個問題,但是有一個更簡單的解決方案,只需將原始錨標記轉換為RRD連結