Maison  >  Questions et réponses  >  le corps du texte

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

<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>

P粉311563823P粉311563823432 Il y a quelques jours631

répondre à tous(1)je répondrai

  • P粉301523298

    P粉3015232982023-09-05 17:32:11

    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>
      );
    }

    répondre
    0
  • Annulerrépondre