未捕獲的運行時錯誤：useNavigate() 只能在 <Router> 元件的上下文中使用

Question

<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>

Answer 1

useNavigate 鉤子無法在路由器提供的路由上下文之外使用，例如在本例中為 BrowserRouter。您可以將BrowserRouter提升到ReactTree中的更高位置來解決這個問題，但是有一個更簡單的解決方案，只需將原始錨標記轉換為RRD 連結

<Link className="nav-link active" aria-current="page" to="/signup">
  Sign up
</Link>

function App() {
  return (
    <Router>
      <div className="Login">
        <h3>
          <Link className="nav-link active" aria-current="page" to="/signup">
            Sign up
          </Link>
        </h3>
        <Routes>
          <Route path="/" element={<LoginForm />} />
          <Route path="/signup" element={<SignUp />} />
        </Routes>
      </div>
    </Router>
  );
}