Ich habe ein neues React-Projekt erstellt. Ich bin neu in der Reaktion und versuche zu navigieren, nachdem ich auf den Text geklickt habe, erhalte jedoch diesen Fehler.

Nicht erfasste Laufzeitfehler: × FEHLER useNavigate() darf nur im Kontext einer -Komponente verwendet werden. bei Invariante (http://localhost:3000/static/js/bundle.js:1123:11) bei useNavigateUnstable (http://localhost:3000/static/js/bundle.js:66522:102) bei useNavigate (http://localhost:3000/static/js/bundle.js:66519:46) bei App (http://localhost:3000/static/js/bundle.js:83:81) bei renderWithHooks (http://localhost:3000/static/js/bundle.js:26618:22) bei mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17) bei beginWork (http://localhost:3000/static/js/bundle.js:31200:20) unter HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16210:18) bei Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16254:20) bei invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16311:35) FEHLER useNavigate() darf nur im Kontext einer -Komponente verwendet werden. bei Invariante (http://localhost:3000/static/js/bundle.js:1123:11) bei useNavigateUnstable (http://localhost:3000/static/js/bundle.js:66522:102) bei useNavigate (http://localhost:3000/static/js/bundle.js:66519:46) bei App (http://localhost:3000/static/js/bundle.js:83:81) bei renderWithHooks (http://localhost:3000/static/js/bundle.js:26618:22) bei mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17) bei beginWork (http://localhost:3000/static/js/bundle.js:31200:20) unter HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16210:18) bei Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16254:20) bei invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16311:35) FEHLER useNavigate() darf nur im Kontext einer -Komponente verwendet werden. bei Invariante (http://localhost:3000/static/js/bundle.js:1123:11) bei useNavigateUnstable (http://localhost:3000/static/js/bundle.js:66522:102) bei useNavigate (http://localhost:3000/static/js/bundle.js:66519:46) bei App (http://localhost:3000/static/js/bundle.js:83:81) bei renderWithHooks (http://localhost:3000/static/js/bundle.js:26618:22) bei mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17) bei beginWork (http://localhost:3000/static/js/bundle.js:31200:20) bei beginWork$1 (http://localhost:3000/static/js/bundle.js:36163:18) bei performUnitOfWork (http://localhost:3000/static/js/bundle.js:35432:16) bei workLoopSync (http://localhost:3000/static/js/bundle.js:35355:9)

Ich kann keine Lösung für dieses Problem finden.

这些是我在文件中使用的代码. app.js-Funktion:

Logo importieren aus './logo.svg'; import './App.css'; LoginForm aus './components/LoginForm' importieren; Importieren Sie SignUp aus „./signup“; import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom'; Funktion App() { const navigation = useNavigate(); const handleSignUpClick = () => { navigieren('/signup'); } zurückkehren (  
 
  Melden Sie sich an  
  } /> } />  
  ); } Standard-App exportieren;

这是LoginForm.js的代码：

import React, { useState } from 'react'; import { Button, Form, FormGroup, Label, Input, InputGroup } from 'reactstrap'; import { FaEye, FaEyeSlash } aus 'react-icons/fa'; Funktion LoginForm() { const [Benutzername, setUsername] = useState(''); const [Passwort, setPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); const handleSubmit = (event) => { //Handle-Senden } const toggleShowPassword = () => { setShowPassword(!showPassword); } zurückkehren ( 
 
  Benutzername  setUsername(e.target.value)} />   Password   setPassword(e.target.value)} />  {Passwort anzeigen ?  : }    
 Senden 
  
 ); } Standard-LoginForm exportieren;

这是signup.js的代码：

import './App.css'; Funktion SignUp() { zurückkehren ( 
 
Bewerbung
 
 ); } Standard-Anmeldung exportieren;