未捕获的运行时错误：useNavigate() 只能在 <Router> 组件的上下文中使用
P粉311563823
2023-09-04 22:15:23
<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;">import logo from './logo.svg';
import './App.css';
import LoginForm from './components/LoginForm';
import SignUp from './signup';
import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';
function App() {
const navigate = useNavigate();
const handleSignUpClick = () => {
navigate('/signup');
}
return (
<Router>
<div className="Login">
<h3>
<a className="nav-link active" aria-current="page" href="#" onClick={handleSignUpClick}>
Sign up
</a>
</h3>
<Routes>
<Route path="/" element={<LoginForm />} />
<Route path="/signup" element={<SignUp />} />
</Routes>
</div>
</Router>
);
}
export default App;</pre>
<p>这是LoginForm.js的代码：</p>
<pre class="brush:php;toolbar:false;">import React, { useState } from 'react';
import { Button, Form, FormGroup, Label, Input, InputGroup } from 'reactstrap';
import { FaEye, FaEyeSlash } from 'react-icons/fa';
function LoginForm() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const handleSubmit = (event) => {
//handle submit
}
const toggleShowPassword = () => {
setShowPassword(!showPassword);
}
return (
<div className="form-box">
<Form onSubmit={handleSubmit}>
<FormGroup>
<Label for="username">Username</Label>
<Input type="text" name="username" id="username" value={username} onChange={e => setUsername(e.target.value)} />
</FormGroup>
<FormGroup>
<Label for="password">Password</Label>
<InputGroup>
<Input type={showPassword ? 'text' : 'password'} name="password" id="password" value={password} onChange={e => setPassword(e.target.value)} />
<Button onClick={toggleShowPassword}>
{showPassword ? <FaEyeSlash /> : <FaEye />}
</Button>
</InputGroup>
</FormGroup>
<div className="text-center">
<Button>Submit</Button>
</div>
</Form>
</div>
);
}
export default LoginForm;</pre>
<p>这是signup.js的代码：</p>
<pre class="brush:php;toolbar:false;">import './App.css';
function SignUp() {
return (
<div className="Login">
<h1>Application</h1>
</div>
);
}
export default SignUp;</pre></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
useNavigate钩子不能在路由器提供的路由上下文之外使用，例如在本例中为BrowserRouter。您可以将BrowserRouter提升到ReactTree中的更高位置来解决这个问题，但是有一个更简单的解决方案，只需将原始锚标记转换为RRD链接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> ); }