未捕获的运行时错误：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>

从 './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>
  );
}