발견되지 않은 런타임 오류: useNavigate()는 <Router> 구성 요소의 컨텍스트에서만 사용할 수 있습니다.

Question

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

Answer 1

useNavigate 钩子不能在路由器提供的路由上下文之外使用，例如在本例中为 BrowserRouter。您可以将BrowserRouter提升到ReactTree中的更高位置来解决这个问题，但是有一个更简单的解决方案，只需将原始锚标记转换为RRD 链接

으아악 으아악