발견되지 않은 런타임 오류: useNavigate()는 <Router> 구성 요소의 컨텍스트에서만 사용할 수 있습니다.
<p>새로운 반응 프로젝트를 만들었습니다. 저는 반응이 처음이고 텍스트를 클릭한 후 탐색하려고 하는데 이 오류가 발생합니다. </p>
<인용문>
<pre class="brush:php;toolbar:false;">잡히지 않은 런타임 오류:
×
오류
useNavigate()는 <Router> 구성요소의 컨텍스트에서만 사용될 수 있습니다.
불변 (http://localhost:3000/static/js/bundle.js:1123:11)
useNavigateUnstable(http://localhost:3000/static/js/bundle.js:66522:102)에서
useNavigate에서 (http://localhost:3000/static/js/bundle.js:66519:46)
앱에서 (http://localhost:3000/static/js/bundle.js:83:81)
renderWithHooks에서 (http://localhost:3000/static/js/bundle.js:26618:22)
mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17)
BeginWork에서 (http://localhost:3000/static/js/bundle.js:31200:20)
HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16210:18)
Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16254:20)
InvokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16311:35)
오류
useNavigate()는 <Router> 구성요소의 컨텍스트에서만 사용될 수 있습니다.
불변 (http://localhost:3000/static/js/bundle.js:1123:11)
useNavigateUnstable(http://localhost:3000/static/js/bundle.js:66522:102)에서
useNavigate에서 (http://localhost:3000/static/js/bundle.js:66519:46)
앱에서 (http://localhost:3000/static/js/bundle.js:83:81)
renderWithHooks에서 (http://localhost:3000/static/js/bundle.js:26618:22)
mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29904:17)
BeginWork에서 (http://localhost:3000/static/js/bundle.js:31200:20)
HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16210:18)
Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16254:20)
InvokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16311:35)
오류
useNavigate()는 <Router> 구성요소의 컨텍스트에서만 사용될 수 있습니다.
불변 (http://localhost:3000/static/js/bundle.js:1123:11)
useNavigateUnstable(http://localhost:3000/static/js/bundle.js:66522:102)에서
useNavigate에서 (http://localhost:3000/static/js/bundle.js:66519:46)
앱에서 (http://localhost:3000/static/js/bundle.js:83:81)
renderWithHooks에서 (http://localhost:3000/static/js/bundle.js:26618:22)
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)에서
PerformUnitOfWork(http://localhost:3000/static/js/bundle.js:35432:16)에서
workLoopSync에서(http://localhost:3000/static/js/bundle.js:35355:9)</pre>
</인용문>
<p>이 문제에 대한 해결책을 찾을 수 없습니다.</p>
<p>이런 중문을 사용하는 사람들이 있습니다.
app.js代码：</p>
<pre class="brush:php;toolbar:false;">'./logo.svg'에서 로고 가져오기;
import './App.css';
'./comComponents/LoginForm'에서 LoginForm을 가져옵니다.
'./signup'에서 가입 가져오기;
import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';
함수 앱() {
const Navigate = useNavigate();
const handlerSignUpClick = () => {
탐색('/가입');
}
반품 (
<라우터>
<div className="로그인">
<h3>
<a className="nav-link active" aria-current="페이지" href="#" onClick={handleSignUpClick}>
가입하기
</a>
</h3>
<경로>
<경로 경로="/" 요소={<LoginForm />} />
<경로 경로="/signup" 요소={<SignUp />} />
</경로>
</div>
</라우터>
);
}
기본 앱 내보내기;</pre>
<p>这是LoginForm.js의 대표:</p>
<pre class="brush:php;toolbar:false;">'react'에서 React, { useState } 가져오기;
import { Button, Form, FormGroup, Label, Input, InputGroup } from 'reactstrap';
'react-icons/fa'에서 { FaEye, FaEyeSlash }를 가져옵니다.
함수 로그인폼() {
const [사용자 이름, setUsername] = useState('');
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const handlerSubmit = (이벤트) => {
//제출 처리
}
const 토글ShowPassword = () => {
setShowPassword(!showPassword);
}
반품 (
<div className="양식 상자">
<Form onSubmit={handleSubmit}>
<양식그룹>
<Label for="username">사용자 이름</Label>
<입력 유형="텍스트" name="사용자 이름" id="사용자 이름" 값={사용자 이름} onChange={e => setUsername(e.target.value)} />
</양식그룹>
<양식그룹>
<레이블="비밀번호">비밀번호</레이블>
<입력그룹>
<입력 유형={showPassword ? '텍스트' : '비밀번호'} 이름="비밀번호" id="비밀번호" 값={비밀번호} onChange={e => setPassword(e.target.value)} />
<버튼 onClick={toggleShowPassword}>
{표시비밀번호 ? <FaEyeSlash /> : <FaEye />}
</버튼>
</입력그룹>
</양식그룹>
<div className="text-center">
<버튼>제출</버튼>
</div>
</양식>
</div>
);
}
기본 로그인 양식 내보내기</pre>
<p>signup.js의 대표:</p>
<pre class="brush:php;toolbar:false;">가져오기 './App.css';
함수 사인업() {
반품 (
<div className="로그인">
애플리케이션
</div>
);
}
기본 가입 내보내기;</pre></p>
