<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>
useNavigate
钩子不能在路由器提供的路由上下文之外使用,例如在本例中为BrowserRouter
。您可以将BrowserRouter
提升到ReactTree中的更高位置来解决这个问题,但是有一个更简单的解决方案,只需将原始锚标记转换为RRD链接