未捕获的运行时错误:useNavigate() 只能在 <Router> 组件的上下文中使用
P粉311563823
P粉311563823 2023-09-04 22:15:23
0
1
629
<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>
P粉311563823
P粉311563823

全部回复(1)
P粉301523298

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>
  );
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!