Erreur d'exécution non détectée : useNavigate() ne peut être utilisé que dans le contexte d'un composant <Router>

Question

<p>J'ai créé un nouveau projet React. Je suis nouveau pour réagir et j'essaie de naviguer après avoir cliqué sur le texte mais cela me donne cette erreur. </p> <blockquote> <pre class="brush:php;toolbar:false;">Erreurs d'exécution non détectées : × ERREUR useNavigate() ne peut être utilisé que dans le contexte d'un composant <Router> à invariant (http://localhost:3000/static/js/bundle.js:1123:11) sur useNavigateUnstable (http://localhost:3000/static/js/bundle.js:66522:102) sur useNavigate (http://localhost:3000/static/js/bundle.js:66519:46) sur l'application (http://localhost:3000/static/js/bundle.js:83:81) sur renderWithHooks (http://localhost:3000/static/js/bundle.js:26618:22) sur mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17) àbeginWork (http://localhost:3000/static/js/bundle.js:31200:20) sur HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16210:18) sur Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16254:20) sur EnsureGuardedCallback (http://localhost:3000/static/js/bundle.js:16311:35) ERREUR useNavigate() ne peut être utilisé que dans le contexte d'un composant <Router> à invariant (http://localhost:3000/static/js/bundle.js:1123:11) sur useNavigateUnstable (http://localhost:3000/static/js/bundle.js:66522:102) sur useNavigate (http://localhost:3000/static/js/bundle.js:66519:46) sur l'application (http://localhost:3000/static/js/bundle.js:83:81) sur renderWithHooks (http://localhost:3000/static/js/bundle.js:26618:22) sur mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17) àbeginWork (http://localhost:3000/static/js/bundle.js:31200:20) sur HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16210:18) sur Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16254:20) sur EnsureGuardedCallback (http://localhost:3000/static/js/bundle.js:16311:35) ERREUR useNavigate() ne peut être utilisé que dans le contexte d'un composant <Router> à invariant (http://localhost:3000/static/js/bundle.js:1123:11) sur useNavigateUnstable (http://localhost:3000/static/js/bundle.js:66522:102) sur useNavigate (http://localhost:3000/static/js/bundle.js:66519:46) sur l'application (http://localhost:3000/static/js/bundle.js:83:81) sur renderWithHooks (http://localhost:3000/static/js/bundle.js:26618:22) sur mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17) àbeginWork (http://localhost:3000/static/js/bundle.js:31200:20) à beginWork$1 (http://localhost:3000/static/js/bundle.js:36163:18) sur performUnitOfWork (http://localhost:3000/static/js/bundle.js:35432:16) sur workLoopSync (http://localhost:3000/static/js/bundle.js:35355:9)</pre> </blockquote> <p>Je ne trouve aucune solution à ce problème.</p>

这些是我在文件中使用的代码。 app.js：</p> <pre class="brush:php;toolbar:false;">importer le logo depuis './logo.svg'; importer './App.css'; importer LoginForm depuis './components/LoginForm' ; importer l'inscription depuis './signup' ; importer { BrowserRouter as Router, Routes, Route, Link, useNavigate } depuis 'react-router-dom' ; fonction App() { const naviguer = useNavigate(); const handleSignUpClick = () => { naviguer('/inscription'); } retour ( <Routeur> <div className="Connexion"> <h3> <a className="nav-link actif" aria-current = "page" href="#" onClick={handleSignUpClick}> S'inscrire ≪/a> </h3> <Itinéraires> <Chemin d'itinéraire="/" element={<LoginForm />} /> <Chemin d'itinéraire="/inscription" element={<Inscription />} /> </Itinéraires> </div> </Routeur> ); } exporter l'application par défaut ;</pre> <p>这是LoginForm.js的代码：</p> <pre class="brush:php;toolbar:false;">importer React, { useState } depuis 'react'; importer { Button, Form, FormGroup, Label, Input, InputGroup } depuis 'reactstrap' ; importer { FaEye, FaEyeSlash } depuis 'react-icons/fa' ; fonction LoginForm() { const [nom d'utilisateur, setUsername] = useState(''); const [mot de passe, setPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); const handleSubmit = (événement) => { // gérer la soumission } const toggleShowPassword = () => { setShowPassword(!showPassword); } retour ( <div className="form-box"> <Formulaire onSubmit={handleSubmit}> <GroupeFormulaires> <Étiquette pour="nom d'utilisateur">Nom d'utilisateur</Étiquette> <Type d'entrée="texte" name="nom d'utilisateur" id="nom d'utilisateur" value={nom d'utilisateur} onChange={e => setUsername(e.target.value)} /> </GroupeFormulaires> <GroupeFormulaires> <Étiquette pour="mot de passe">Mot de passe</Étiquette> <Groupe d'entrée> <Type d'entrée={showPassword ? 'text' : 'mot de passe'} name="mot de passe" id="mot de passe" value={mot de passe} onChange={e => setPassword(e.target.value)} /> <Button onClick={toggleShowPassword}> {montrer le mot de passe ? <FaEyeSlash /> : <FaEye />} </Bouton> </InputGroup> </GroupeFormulaires> <div className="text-center"> <Bouton>Soumettre</Bouton> </div> </Formulaire> </div> ); } exporter le formulaire de connexion par défaut;</pre> <p>这是signup.js的代码：</p> <pre class="brush:php;toolbar:false;">importer './App.css'; function Inscription() { retour ( <div className="Connexion"> <h1>Application</h1> </div> ); } exporter l'inscription par défaut ;</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>
  );
}