Ralat masa jalan tidak ditangkap: useNavigate() hanya boleh digunakan dalam konteks komponen <Router>

Question

Saya mencipta projek reaksi baharu. Saya baru bertindak balas dan saya cuba menavigasi selepas mengklik pada teks tetapi ia memberi saya ralat ini.

Ralat masa jalan yang tidak ditangkap:
×
RALAT
useNavigate() hanya boleh digunakan dalam konteks komponen <Router>
    pada invarian (http://localhost:3000/static/js/bundle.js:1123:11)
    di useNavigateUnstable (http://localhost:3000/static/js/bundle.js:66522:102)
    di useNavigate (http://localhost:3000/static/js/bundle.js:66519:46)
    di Apl (http://localhost:3000/static/js/bundle.js:83:81)
    di renderWithHooks (http://localhost:3000/static/js/bundle.js:26618:22)
    di mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17)
    di beginWork (http://localhost:3000/static/js/bundle.js:31200:20)
    di HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16210:18)
    di Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16254:20)
    di invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16311:35)
RALAT
useNavigate() hanya boleh digunakan dalam konteks komponen <Router>
    pada invarian (http://localhost:3000/static/js/bundle.js:1123:11)
    di useNavigateUnstable (http://localhost:3000/static/js/bundle.js:66522:102)
    di useNavigate (http://localhost:3000/static/js/bundle.js:66519:46)
    di Apl (http://localhost:3000/static/js/bundle.js:83:81)
    di renderWithHooks (http://localhost:3000/static/js/bundle.js:26618:22)
    di mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17)
    di beginWork (http://localhost:3000/static/js/bundle.js:31200:20)
    di HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16210:18)
    di Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16254:20)
    di invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16311:35)
RALAT
useNavigate() hanya boleh digunakan dalam konteks komponen <Router>
    pada invarian (http://localhost:3000/static/js/bundle.js:1123:11)
    di useNavigateUnstable (http://localhost:3000/static/js/bundle.js:66522:102)
    di useNavigate (http://localhost:3000/static/js/bundle.js:66519:46)
    di Apl (http://localhost:3000/static/js/bundle.js:83:81)
    di renderWithHooks (http://localhost:3000/static/js/bundle.js:26618:22)
    di mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17)
    di beginWork (http://localhost:3000/static/js/bundle.js:31200:20)
    di beginWork$1 (http://localhost:3000/static/js/bundle.js:36163:18)
    di performUnitOfWork (http://localhost:3000/static/js/bundle.js:35432:16)
    di workLoopSync (http://localhost:3000/static/js/bundle.js:35355:9)

Saya tidak dapat mencari sebarang penyelesaian untuk masalah ini.

这些是我在文件中使用的代码。 app.js代码：

import logo daripada './logo.svg';
import './App.css';
import Log Masuk Borang daripada './components/LoginForm';
import SignUp daripada './signup';
import { BrowserRouter as Router, Routes, Route, Link, useNavigate } daripada 'react-router-dom';

fungsi Apl() {
  const navigate = useNavigate();

  const handleSignUpClick = () => {
    navigasi('/signup');
  }

  kembali (
    <Penghala>
      <div className="Log Masuk">
        <h3>
          <a className="pautan navigasi aktif" aria-current="halaman" href="#" onClick={handleSignUpClick}>
            daftar
          </a>
        </h3>
        <Laluan>
          <Laluan laluan="/" element={<Borang Log Masuk />} />
          <Laluan laluan="/daftar" elemen={<Daftar />} />
        </Laluan>
      </div>
    </Penghala>
  );
}

eksport Apl lalai;

这是LoginForm.js的代码：

import React, { useState } daripada 'react';
import { Button, Form, FormGroup, Label, Input, InputGroup } daripada 'reactstrap';
import { FaEye, FaEyeSlash } daripada 'react-icons/fa';

function LoginForm() {
  const [nama pengguna, setUsername] = useState('');
  const [kata laluan, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  const handleSubmit = (acara) => {
    //mengendalikan penyerahan
  }
  

  const toggleShowPassword = () => {
    setShowPassword(!showPassword);
  }

  kembali (
    <div className="kotak borang">
      <Borang onSubmit={handleSubmit}>
        <FormGroup>
          <Label untuk="nama pengguna">Nama Pengguna</Label>
          <Jenis input="teks" name="nama pengguna" id="nama pengguna" value={username} onChange={e => setUsername(e.target.value)} />
        </FormGroup>
        <FormGroup>
          <Label untuk="kata laluan">Kata Laluan</Label>
          <InputGroup>
            <Jenis input={showPassword ? 'text' : 'password'} name="kata laluan" id="kata laluan" value={password} onChange={e => setPassword(e.target.value)} />
            <Button onClick={toggleShowPassword}>
              {showPassword ? <FaEyeSlash /> : <FaEye />}
            </Butang>
          </InputGroup>
        </FormGroup>
        <div className="pusat teks">
          <Butang>Serah</Butang>
        </div>
      </Borang>
    </div>
  );
}

eksport Borang Masuk lalai;

这是signup.js的代码：

import './App.css';

function SignUp() {
  kembali (
    <div className="Log Masuk">
      <h1>Aplikasi</h1>
    </div>
  );
}

eksport Pendaftaran lalai;

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