React JS의 <Router> 구성 요소 컨텍스트에서만 useNavigate()에서 발견되지 않은 오류

Question

읽기 쉽도록 일부 코드를 제거했습니다

<인용문>

하지만 모든 것이 올바르게 가져오고 제대로 작동하지만 이 오류를 해결할 수 없습니다이 오류가 발생했지만 튜토리얼을 봤고 심지어 ReactRouter 웹사이트에도 같은 방법이 있지만 작동하지 않습니다. 코드

키보드의 Enter 키를 눌렀을 때 경로를 변경하고 싶습니다

<인용문>

app.js 파일입니다

함수 앱() {
       
  반품 (
    <div>
        <div key="navbar" className="navbar">
            <나브바 />
        </div>
        <div key="search-box" className="search-box">
            <SearchBar 카드데이터={카드}/>
        </div>
        <div>
            <카드 키="카드" 카드데이터={카드} />
        </div>
    </div>
  );
}

기본 앱 내보내기;

<인용문>

이 파일은 모든 라우팅이 발생하는 파일입니다. useNavigate가 경로를 변경하면 열려고 하는 경로가 열려야 합니다('/SearchResult')

const 카드 = ({ 카드 데이터: 카드 구성 요소 }) =>
  반품 (
//useNavigate가 경로를 "/SearchResult"로 변경할 때 열어야 하는 파일입니다.
          <경로 경로="/SearchResult" 요소={<SearchResPage />}></Route>
        </경로>

        <div className="오른쪽 섹션">
          <RightCard 카드데이터={cardComponent} />
        </div>
      </div>
    </라우터>
  );
};
기본 카드 내보내기;

이것은 useNavigate를 사용하여 경로를 변경할 파일입니다. 제가 열고 싶은 파일은 searchResPage입니다(코드는 이 코드 뒤에 있습니다)

"react-router-dom"에서 { useNavigate } 가져오기;

const SearchBar = ({ 카드데이터}) =>
  const 탐색=useNavigate();

  //onKeyDown이 호출하는 함수입니다.
함수 searchResult(e) {
    
    if (e.key === "Enter") {
      if (e.target.value === "") return;
        //라우팅 변경에 사용
          탐색('/검색결과')

        //props에서 전달된 결과를 필터링하고 표시하는 데 사용됩니다.
        카드데이터.필터((결과) => {
          if (`${result.heading}`.toLowerCase().match(e.target.value)) {
              console.log(결과)
            }
      });
    }
  }

  반품 (
    <div className="flex">
      <input onKeyDown={searchResult} type="text" ></input>
    </div>
  );
};

기본 검색 표시줄 내보내기

<인용문>

아니면 페이지를 새로 고치지 않고 Enter 키를 눌렀을 때 경로를 변경할 수 있는 다른 방법이 있나요? 이 옵션을 찾을 수 있지만 왜 작동하지 않는지 모르겠습니다

Answer 1

오류는 Router之外使用useNavigate연결을 시도하고 있음을 의미합니다. 가장 일반적인 것은 react-router-dom包中，如BrowserRouter，然后您有Routes和Route 구성 요소에 있습니다.

는 다음과 같아야 합니다(라우터는 앱이나 index.js와 같은 다른 파일에 있을 수 있음):

으아악

그러면 구성 요소가 제대로 작동할 것입니다.