在React JS中，只能在<Router>组件的上下文中使用useNavigate()的未捕获错误

Question

我删除了一些代码以便阅读更容易

但是所有的东西都正确导入并且正常工作，但是我无法解决这个错误 我得到了这个错误，但是我看到了一个教程，甚至reactRouter网站也有相同的方法，但是它在我的代码中不起作用

我想在键盘上按下Enter键时更改路由

这是app.js文件

function App() {
       
  return (
    <div>
        <div key="navbar" className="navbar">
            <Navbar />
        </div>
        <div key="search-box" className="search-box">
            <SearchBar carddata={cards}/>
        </div>
        <div>
            <Cards key="cards" carddata={cards} />
        </div>
    </div>
  );
}

export default App;

这是所有路由发生的文件，当useNavigate更改路由时，它应该打开我想要打开的路由（'/SearchResult'）

const Cards = ({ carddata: cardComponent }) => {
  return (
//这是当useNavigate更改路由为“/SearchResult”时应该打开的文件
          <Route path="/SearchResult" element={<SearchResPage />}></Route>
        </Routes>

        <div className="right-section">
          <RightCard cardData={cardComponent} />
        </div>
      </div>
    </Router>
  );
};
export default Cards;

这是将使用useNavigate更改路由的文件，我想要打开的文件是searchResPage（代码将在此代码之后）

import {  useNavigate } from "react-router-dom";

const SearchBar = ({ carddata}) => {
  const navigate=useNavigate();

  //这是onKeyDown调用的函数
function searchResult(e) {
    
    if (e.key === "Enter") {
      if (e.target.value === "") return;
        //用于更改路由
          navigate('/SearchResult')

        //用于过滤从props传递的结果并显示它们
        carddata.filter((result) => {
          if (`${result.heading}`.toLowerCase().match(e.target.value)) {
              console.log(result)
            }  
      });
    }
  }

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

export default SearchBar;

或者还有其他方法可以在按下Enter键时更改路由而不刷新页面吗？我能找到这个选项，但不知道为什么它不起作用

Answer 1

错误意味着您正在尝试在Router之外使用useNavigate钩子。 最常见的是在react-router-dom包中，如BrowserRouter，然后您有Routes和Route组件。

应该像这样（Router可以在App中或另一个文件中，如index.js）：

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import ExamplePage from "./components/ExamplePage";
import SearchBar from "./components/SearchBar";

function App () {
  return (
    <div className="App">
      <Router>        {/* <--- 需要的组件，Router */}
        <SearchBar /> {/* <--- 在Router内部使用useNavigate的组件 */}
        <Routes>
          <Route path="/my-page" element={<ExamplePage />} />
        </Routes>
      </Router>
    </div>
  )
};

export default App;

然后您的组件应该可以正常工作。